:root {
    /* Brand Colors */
    --sheep-green: #068125;
    --sheep-green-dark: #08701f;
    --sheep-green-light: #2fae40;
    --sheep-orange: #ef8839;
    --sheep-orange-dark: #e76423;
    /* The main colour, green since 2026-10-12 (Benji); orange stays for promotions and warnings. */
    --sheep-accent: #0f8b27;
    --sheep-accent-dark: #068125;
    --sheep-accent-ink: #08701f;
    --sheep-accent-soft: #e6f4e8;
    --sheep-accent-line: #bfe2c5;
    /* The logo's deep green (2026-10-10): headings, links and the main buttons in light mode.
       The bars keep --sheep-green / --sheep-green-dark. */
    --sheep-green-deep: #068125;
    --sheep-heading: #068125;
    /* Text / neutral */
    --sheep-light-bg: #f2f5f9;
    --sheep-dark: #202124;
    --sheep-gray: #686b72;
    /* Surface tokens */
    --surface-bg: #ffffff;
    --surface-bg-soft: #f2f5f9;
    --surface-bg-accent: #f2f5f9;
    --surface-bg-glass: rgba(255, 255, 255, 0.82);
    --surface-border: rgba(32, 33, 36, 0.08);
    --surface-border-strong: rgba(32, 33, 36, 0.14);
    --surface-shadow: 0 8px 24px rgba(0,0,0,0.12);
    --surface-shadow-hover: 0 12px 32px rgba(0,0,0,0.16);
    --text-muted-color: #686b72;
    /* Design tokens */
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.12);
    --transition: all 0.25s ease;
    /* Layout */
    --navbar-height: 56px;
    --sidebar-collapsed: 58px;
    --sidebar-expanded: 234px;
    --sidebar-push-collapsed: calc(var(--sidebar-collapsed) + 8px);
    --sidebar-push-expanded: calc(var(--sidebar-expanded) + 8px);
    /* Top bar: white, dark text, orange on mouse-over. The sidebar, phone menu and bottom bar
       keep the brand dark green. */
    --bar-bg: #ffffff;
    --bar-border: rgba(32, 33, 36, 0.10);
    --bar-text: #202124;
    --bar-muted: #686b72;
    --bar-accent: #08701f;
    --bar-accent-bg: #f5f6f7;
    --bar-active-shadow: 0 1px 3px rgba(32, 33, 36, 0.12);
    /* Mouse-over is orange (the second brand colour), the chosen item is green with an orange mark. */
    --bar-hover-bg: rgba(var(--sheep-accent-rgb), 0.14);
    --bar-hover-text: #068125;
    --bar-mark: var(--sheep-accent);
    --bar-pill-bg: #eef1ee;
    --bar-pill-active-bg: #ffffff;
    --bar-danger: #dc2626;
}

/* Dark mode */
[data-theme="dark"] {
    --sheep-light-bg: #111a2b;
    /* Dark mode: deep green would vanish on the dark background. */
    --sheep-green-deep: var(--sheep-green);
    --sheep-heading: inherit;
    --sheep-dark: #e9ebee;
    --sheep-gray: #9ca8ba;
    --surface-bg: #1b2742;
    --surface-bg-soft: #152037;
    --surface-bg-accent: #1d3a2a;
    --surface-bg-glass: rgba(21, 32, 55, 0.82);
    --surface-border: rgba(148, 163, 184, 0.16);
    --surface-border-strong: rgba(148, 163, 184, 0.28);
    --surface-shadow: 0 10px 28px rgba(0,0,0,0.38);
    --surface-shadow-hover: 0 16px 36px rgba(0,0,0,0.48);
    --text-muted-color: #9ca8ba;
    --bar-bg: #1b2742;
    --bar-border: rgba(148, 163, 184, 0.16);
    --bar-text: #e9ebee;
    --bar-muted: #9ca8ba;
    --bar-accent: #86d48f;
    --bar-accent-bg: rgba(134, 239, 172, 0.12);
    --bar-active-shadow: none;
    --bar-hover-bg: rgba(var(--sheep-accent-rgb), 0.18);
    --bar-hover-text: var(--sheep-accent);
    --bar-mark: var(--sheep-accent);
    --bar-pill-bg: rgba(255, 255, 255, 0.08);
    --bar-pill-active-bg: #1f2937;
    --bar-danger: #fca5a5;
    /* Bootstrap's own tokens: the site switches themes with data-theme, not data-bs-theme, so
       anything styled with var(--bs-body-bg) (cards, sheets, badges) stayed white in dark mode. */
    --bs-body-bg: #111a2b;
    --bs-body-bg-rgb: 17, 26, 43;
    --bs-body-color: #e9ebee;
    --bs-body-color-rgb: 226, 232, 240;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #9ca8ba;
    --bs-secondary-color-rgb: 148, 163, 184;
    --bs-secondary-bg: #152037;
    --bs-secondary-bg-rgb: 30, 41, 59;
    --bs-tertiary-color: #686b72;
    --bs-tertiary-bg: #1b2742;
    --bs-tertiary-bg-rgb: 23, 32, 51;
    --bs-heading-color: inherit;
    --bs-border-color: rgba(148, 163, 184, 0.22);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
    --bs-light-rgb: 30, 41, 59;
    --bs-card-bg: #1b2742;
    --bs-card-color: #e9ebee;
    --bs-card-border-color: rgba(148, 163, 184, 0.16);
    --bs-card-cap-bg: rgba(255, 255, 255, 0.04);
    --bs-dropdown-bg: #1b2742;
    --bs-dropdown-color: #e9ebee;
    --bs-dropdown-link-color: #e9ebee;
    --bs-dropdown-link-hover-bg: rgba(var(--sheep-accent-rgb), 0.18);
    --bs-dropdown-link-hover-color: var(--sheep-accent);
    --bs-dropdown-border-color: rgba(148, 163, 184, 0.2);
    --bs-dropdown-header-color: #9ca8ba;
    --bs-modal-bg: #1b2742;
    --bs-modal-color: #e9ebee;
    --bs-offcanvas-bg: #1b2742;
    --bs-offcanvas-color: #e9ebee;
    --bs-list-group-bg: #1b2742;
    --bs-list-group-color: #e9ebee;
    --bs-list-group-border-color: rgba(148, 163, 184, 0.16);
    background-color: #111a2b;
    color: #e9ebee;
}

    [data-theme="dark"] .text-bg-light {
        color: #e9ebee !important;
    }

    [data-theme="dark"] .form-control,
    [data-theme="dark"] .form-select {
        background-color: #1b2742;
        color: #e9ebee;
        border-color: rgba(148, 163, 184, 0.28);
    }

        [data-theme="dark"] .form-control::placeholder {
            color: #686b72;
        }

        /* Floating labels keep their example text hidden in the dark theme too (it showed through
           the label on the sign-in and sign-up pages, 2026-10-12). */
        [data-theme="dark"] .form-floating > .form-control::placeholder {
            color: transparent;
        }

/* Base page colors */
html,
body {
    background-color: var(--sheep-light-bg);
    color: var(--sheep-dark);
}

h1[tabindex="-1"]:focus {
    outline: none;
}

/* Global utilities */
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-sheep-green {
    color: var(--sheep-green) !important;
}

.text-sheep-orange {
    color: #068125 !important;
}

.text-muted {
    color: var(--text-muted-color) !important;
}

    .text-muted.small {
        font-size: 0.875rem;
        line-height: 1.3;
        color: var(--text-muted-color) !important;
    }

.bg-surface {
    background: var(--surface-bg) !important;
}

.bg-surface-soft {
    background: var(--surface-bg-soft) !important;
}

.bg-surface-accent {
    background: var(--surface-bg-accent) !important;
}

.border-surface {
    border-color: var(--surface-border) !important;
}

/* Prevent horizontal overflow.
   clip, not hidden: overflow-x:hidden silently turns overflow-y into auto, which made body and
   the layout wrapper scroll boxes that never scroll. Every position:sticky on the site (basket,
   category tabs, feed header) then pinned to them and never stuck. clip hides the same sideways
   overflow without creating a scroll box. "hidden" first is the fallback for iOS < 16. */
body,
html,
.d-flex.flex-column.min-vh-100 {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Top Navbar */
.sheep-topbar {
    background: var(--bar-bg);
    border-bottom: 1px solid var(--bar-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    color: var(--bar-text);
    z-index: 1030;
}

    .sheep-topbar .navbar-brand img {
        height: 42px;
        transition: var(--transition);
    }

/* Phones and tablets: the sheep at the left of the top bar (desktop has it in the sidebar). */
.sheep-topbar-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* As big as the bar allows: it overlaps the bar's own vertical padding. */
    margin: -8px 8px -8px -4px;
}

    .sheep-topbar-logo img {
        height: calc(var(--navbar-height) - 4px);
        width: auto;
        display: block;
    }

@media (max-width: 400px) {
    .sheep-topbar-logo {
        margin-right: 4px;
    }
}

/* Sidebar */
.sheep-sidebar {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-expanded);
    background: var(--sheep-green-dark);
    color: white;
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1020;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

@media (min-width: 992px) {
    .sheep-sidebar {
        display: flex !important;
    }
}

/* Desktop (992 px and up): the sidebar is open, with its labels; below, there is none (the
   phone menu). No icons-only middle state. */
@media (min-width: 992px) {
    .sheep-sidebar {
        box-shadow: 4px 0 16px rgba(0,0,0,0.18);
    }
}

/* Sidebar logo badge */
.sheep-sidebar-logo {
    /* Circle diameter = square image diagonal */
    --logo-image-size: 100px;
    --logo-circle-size: 140px;
    width: var(--logo-circle-size);
    height: var(--logo-circle-size);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.75rem auto 0.25rem;
    border-radius: 50%;
    /* Default border */
    border: 5px solid var(--sheep-green-light);
    background: var(--surface-bg);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(6, 129, 37, 0.10), inset 0 3px 10px rgba(255, 255, 255, 0.75);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

    /* The actual image stays square. No clipping. */
/* Dark mode: no white inner glow (it showed as a pale square behind the transparent logo). */
[data-theme="dark"] .sheep-sidebar-logo {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(74, 222, 128, 0.12);
}

    a.sheep-sidebar-logo {
        text-decoration: none;
    }

    .sheep-sidebar-logo img {
        width: var(--logo-image-size);
        height: var(--logo-image-size);
        display: block;
        object-fit: contain;
        object-position: center;
        border-radius: 0;
        background: transparent;
        image-rendering: -webkit-optimize-contrast;
    }


    /* Mouse-over: thick orange ring */
    .sheep-sidebar-logo:hover {
        transform: scale(1.06) rotate(5deg);
        border-color: var(--sheep-accent);
        box-shadow: 0 16px 42px rgba(var(--sheep-accent-rgb), 0.22), 0 0 0 7px rgba(var(--sheep-accent-rgb), 0.28), 0 0 0 11px rgba(var(--sheep-accent-rgb), 0.10), inset 0 4px 14px rgba(255, 255, 255, 0.85);
        filter: brightness(1.04) contrast(1.02);
    }

@@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.015);
    }
}

@@media (prefers-reduced-motion: reduce) {
    .sheep-sidebar-logo,
    .sheep-sidebar-logo:hover {
        transition: none;
        transform: none !important;
        animation: none !important;
    }
}

/* Sidebar nav links */
.sheep-sidebar .nav-link {
    color: rgba(255,255,255,0.9);
    border-radius: var(--radius);
    /* Room on both sides, so the selected pill does not touch the edges. */
    margin: 3px 12px;
    padding: 10px 8px;
    white-space: nowrap;
    transition: var(--transition);
    display: flex;
    align-items: center;
}

    .sheep-sidebar .nav-link i {
        font-size: 1.45rem;
        width: 28px;
        text-align: center;
        flex-shrink: 0;
    }

    .sheep-sidebar .nav-link span {
        margin-left: 12px;
    }

.sheep-sidebar .nav-link:hover {
    color: #068125 !important;
    background: rgba(var(--sheep-accent-rgb), 0.12);
}

.sheep-sidebar .nav-link.active,
.sheep-sidebar .nav-link[aria-current="page"] {
    color: var(--sheep-green-dark) !important;
    background: #fff;
    font-weight: 700;
    border-left: 0;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* A chosen category is orange, like its tile in the feed. */
.sheep-sidebar .nav-link.nav-cat.active {
    color: #ffffff !important;
    background: var(--sheep-accent);
    box-shadow: 0 8px 18px rgba(var(--sheep-accent-rgb), 0.35);
}

    .sheep-sidebar .nav-link:hover i {
        color: #068125;
    }

    .sheep-sidebar .nav-link.active i {
        color: var(--sheep-green-dark);
    }

    .sheep-sidebar .nav-link.nav-cat.active i {
        color: #fff;
    }

/* Bottom of the sidebar: soft green waves, a leaf, "Bon appétit !" and a heart. */
.sheep-sidebar-art {
    position: relative;
    margin-top: auto;
    height: 190px;
    flex-shrink: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 118%, rgba(127, 199, 118, 0.55), transparent 48%),
        radial-gradient(circle at 78% 128%, rgba(62, 140, 84, 0.75), transparent 52%),
        radial-gradient(circle at 50% 150%, rgba(31, 102, 58, 0.9), transparent 60%);
}

    .sheep-sidebar-art::before {
        content: "";
        position: absolute;
        left: 22px;
        top: 34px;
        width: 26px;
        height: 46px;
        border-radius: 0 50% 0 50%;
        background: linear-gradient(135deg, #b5e59c, #5aa650);
        transform: rotate(-30deg);
    }

    .sheep-sidebar-art::after {
        content: "";
        position: absolute;
        right: 26px;
        top: 72px;
        width: 18px;
        height: 32px;
        border-radius: 0 50% 0 50%;
        background: linear-gradient(135deg, #c9f0b4, #6cb95f);
        transform: rotate(40deg);
    }

.sheep-sidebar-art-text {
    position: absolute;
    left: 18px;
    bottom: 48px;
    font-family: "Caveat", "Segoe Script", cursive;
    font-size: 1.75rem;
    line-height: 1;
    color: #fff;
    transform: rotate(-12deg);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.sheep-sidebar-art-heart {
    position: absolute;
    left: 92px;
    bottom: 22px;
    color: #068125;
    font-size: 1.1rem;
}

/* Narrow laptops (992 to 1199 px): icons only. */
.sheep-sidenav > .nav-cats-divider:first-child {
    display: none;
}

/* Content push */
@media (min-width: 992px) {
    .main-content {
        padding-left: var(--sidebar-push-expanded);
    }
}

/* <main> on pages with sticky elements: no scroll box (sticky follows the window) and
   nothing wider than the viewport leaks out sideways. */
.sheep-main-flow {
    min-width: 0;
    overflow-x: clip;
}

/* Bottom nav */
.sheep-bottom-nav {
    background: var(--sheep-green);
    border-top: 1px solid var(--sheep-green-dark);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
    padding-bottom: env(safe-area-inset-bottom);
}

    .sheep-bottom-nav .nav-link {
        padding: .4rem .25rem;
        line-height: 1.1;
    }

    .sheep-bottom-nav small {
        font-size: .70rem;
    }

    .sheep-bottom-nav .nav-link.active {
        font-weight: 600;
        text-decoration: none;
        opacity: 1;
    }

    .sheep-bottom-nav .sheep-bottom-link {
        color: #fff;
    }

/* Offcanvas mobile */
.offcanvas-start {
    width: 85% !important;
    max-width: 320px;
}

/* Mobile content padding */
@media (max-width: 991.98px) {
    .main-content {
        padding-bottom: 80px;
    }
}

/* intl-tel-input helpers */
.iti {
    width: 100%;
}

.iti__tel-input {
    width: 100%;
}

.sheep-public-page {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sheep-public-hero,
.sheep-public-card {
    border-radius: 1.25rem;
    padding: 1.5rem;
    background: var(--bs-body-bg);
    border: 1px solid rgba(154, 160, 166, 0.25);
    box-shadow: 0 0.75rem 2rem rgba(32, 33, 36, 0.06);
}

.sheep-public-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
}

.sheep-company-details {
    display: grid;
    gap: 1rem;
    margin: 0;
}

    .sheep-company-details div {
        display: grid;
        grid-template-columns: minmax(150px, 240px) 1fr;
        gap: 1rem;
    }

    .sheep-company-details dt {
        font-weight: 700;
        color: var(--bs-secondary-color);
    }

    .sheep-company-details dd {
        margin: 0;
    }

.sheep-legal-content {
    line-height: 1.7;
}

    .sheep-legal-content h2,
    .sheep-legal-content h3 {
        margin-top: 1.75rem;
    }

    .sheep-legal-content p,
    .sheep-legal-content li {
        color: var(--bs-body-color);
    }

.sheep-public-footer {
    border-top: 1px solid rgba(154, 160, 166, 0.25);
    padding: 1rem 1.25rem;
    background: rgba(32, 33, 36, 0.03);
    font-size: 0.875rem;
}

[data-theme="dark"] .sheep-public-footer,
.theme-dark .sheep-public-footer {
    background: rgba(255, 255, 255, 0.035);
    border-top-color: rgba(255, 255, 255, 0.12);
}

.sheep-public-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.sheep-public-footer-company {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--bs-secondary-color);
}

    .sheep-public-footer-company strong {
        color: var(--bs-body-color);
    }

.sheep-public-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

    .sheep-public-footer-links a {
        color: var(--bs-body-color);
        text-decoration: none;
        font-weight: 500;
    }

        .sheep-public-footer-links a:hover {
            text-decoration: underline;
        }

@media (max-width: 767.98px) {
    .sheep-public-footer {
        padding-bottom: 5.25rem;
    }

    .sheep-public-footer-inner {
        align-items: flex-start;
    }

    .sheep-public-footer-links {
        flex-direction: column;
        gap: 0.4rem;
    }

    .sheep-company-details div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* ---------- top bar: delivery / pickup, theme, language, account ---------- */
.sheep-mode {
    display: inline-flex;
    background: var(--bar-pill-bg);
    border-radius: 999px;
    padding: 3px;
    flex-shrink: 0;
}

.sheep-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--bar-muted);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

    .sheep-mode-btn:hover {
        color: var(--bar-hover-text);
    }

    .sheep-mode-btn.active {
        background: var(--bar-pill-active-bg);
        color: var(--bar-accent);
        box-shadow: 0 1px 3px rgba(32, 33, 36, 0.14);
    }

.sheep-mode-wide {
    display: flex;
}

    .sheep-mode-wide .sheep-mode-btn {
        flex: 1 1 0;
        justify-content: center;
    }

.sheep-topbar-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--bar-text);
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

    .sheep-topbar-icon:hover {
        background: var(--bar-hover-bg);
    }

.sheep-topbar-user {
    color: var(--bar-text);
}

    .sheep-topbar-user:hover,
    .sheep-topbar-user:focus-visible {
        color: var(--bar-hover-text);
    }

/* Orange: the one call to action in the bars. */
.sheep-btn-cta {
    background: var(--sheep-accent);
    border-color: var(--sheep-accent);
    color: #202124;
    font-weight: 700;
}

    .sheep-btn-cta:hover,
    .sheep-btn-cta:focus-visible {
        background: var(--sheep-accent-dark);
        border-color: var(--sheep-accent-dark);
        color: #ffffff;
    }

.sheep-lang-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--surface-border-strong);
    color: var(--bar-text);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background .15s;
}

    .sheep-lang-pill:hover,
    .sheep-lang-pill.show {
        background: var(--bar-hover-bg);
        color: var(--bar-hover-text);
        border-color: var(--bar-mark);
    }

.sheep-lang-code {
    display: inline-block;
    width: 2.2em;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* Every dropdown: the chosen / pressed row in Sheep-Me green, not Bootstrap blue. */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--sheep-green);
    --bs-dropdown-link-active-color: #fff;
}

    .dropdown-menu .dropdown-item.active .sheep-lang-code,
    .dropdown-menu .dropdown-item:active .sheep-lang-code {
        opacity: 1;
    }

.sheep-user-menu {
    min-width: 240px;
}

    .sheep-user-menu .dropdown-header {
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

/* ---------- phone menu (offcanvas) ---------- */
.sheep-offcanvas {
    background: var(--sheep-green-dark);
    color: #fff;
}

    .sheep-offcanvas .offcanvas-header {
        padding: 14px 16px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .sheep-offcanvas .offcanvas-body {
        padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
    }

.sheep-oc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.05rem;
}

    .sheep-oc-brand img {
        height: 40px;
        width: auto;
    }

.sheep-oc {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sheep-oc-mode .sheep-mode {
    width: 100%;
}

.sheep-oc-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sheep-oc-heading {
    padding: 4px 12px 6px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.6;
}

.sheep-oc-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    transition: background .15s;
}

    .sheep-oc-link i,
    .sheep-oc-link .nav-cat-ico {
        width: 22px;
        font-size: 1.15rem;
        text-align: center;
        flex-shrink: 0;
        display: inline-flex;
        justify-content: center;
    }

    .sheep-oc-link:hover,
    .sheep-oc-link:focus-visible {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .sheep-oc-link.active {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
    }

.sheep-oc-sub {
    padding-left: 24px;
    font-weight: 500;
    font-size: 0.93rem;
}

    .sheep-oc-sub i {
        font-size: 1rem;
    }

.sheep-oc-button {
    border: 0;
    background: transparent;
    text-align: left;
}

.sheep-oc-danger {
    color: #fca5a5;
}

.sheep-oc-center {
    justify-content: center;
    font-weight: 500;
    opacity: 0.85;
}

.sheep-oc-auth {
    gap: 6px;
    padding: 4px 0;
}

.sheep-oc-pref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    font-weight: 600;
}

    .sheep-oc-pref > span {
        display: inline-flex;
        align-items: center;
        gap: 12px;
    }

        .sheep-oc-pref > span i {
            width: 22px;
            font-size: 1.15rem;
            text-align: center;
        }

.sheep-lang-inline {
    display: inline-flex;
    gap: 4px;
}

.sheep-lang-chip {
    min-width: 36px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

    .sheep-lang-chip.active {
        background: #fff;
        color: var(--sheep-green);
        border-color: #fff;
    }

.sheep-oc-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 6px 12px 0;
    font-size: 0.75rem;
}

    .sheep-oc-legal a {
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none;
    }

        .sheep-oc-legal a:hover {
            color: #fff;
        }


/* ---------- announcements banner (home page, dashboards) ---------- */
.sheep-announce {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 16px 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface-bg-accent, #f5f6f7);
    border: 1px solid rgba(6, 129, 37, 0.25);
    color: var(--sheep-dark, #202124);
}

    .sheep-announce.is-important {
        background: rgba(var(--sheep-orange-rgb), 0.14);
        border-color: rgba(var(--sheep-orange-rgb), 0.5);
    }

.sheep-announce-icon {
    font-size: 1.2rem;
    color: var(--sheep-green, #068125);
    flex-shrink: 0;
    margin-top: 1px;
}

.sheep-announce.is-important .sheep-announce-icon {
    color: var(--sheep-orange, #ef8839);
}

.sheep-announce-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.92rem;
    line-height: 1.35;
}

    .sheep-announce-text span {
        white-space: pre-line;
    }

.sheep-announce-link {
    font-weight: 700;
    color: var(--sheep-green, #068125);
    text-decoration: none;
    align-self: flex-start;
}

.sheep-announce-close {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    padding: 2px 4px;
    flex-shrink: 0;
}

    .sheep-announce-close:hover {
        opacity: 1;
    }

.hf-list > .sheep-announce {
    max-width: var(--hf-max-w);
    margin-left: auto;
    margin-right: auto;
}

/* The pill and the search box: inline on phones, centred over the content on wide screens. */
.sheep-topbar-center {
    display: contents;
}

/* Desktop: the pill on the left, the search box takes the rest of the bar. */
@media (min-width: 992px) {
    .sheep-topbar-center {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 16px;
    }

    .sheep-topbar-center .sheep-topsearch {
        flex: 1 1 auto;
        margin-left: 14px;
    }

    .sheep-topbar-center .sheep-topsearch-box,
    .sheep-topbar-center .sheep-topsearch.is-open .sheep-topsearch-box,
    .sheep-topbar-center .sheep-topsearch-box:focus-within {
        width: 100%;
    }
}

/* ---------- top-bar search ---------- */
/* Desktop: a compact box that widens on focus. Phones: an icon; open, the box lies over the bar.
   While the phone box is open the pill and the logo step aside. */
.sheep-topsearch {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 10px;
    min-width: 0;
}

.sheep-topsearch-toggle {
    display: none;
}

.sheep-topsearch-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 230px;
    height: 38px;
    border-radius: 999px;
    background: var(--bar-pill-bg);
    border: 1px solid transparent;
    transition: width .2s ease, border-color .15s, box-shadow .15s;
}

    .sheep-topsearch.is-open .sheep-topsearch-box,
    .sheep-topsearch-box:focus-within {
        width: 420px;
        border-color: var(--sheep-accent);
        background: var(--bar-pill-active-bg);
        box-shadow: 0 0 0 3px rgba(var(--sheep-accent-rgb), 0.18);
    }

.sheep-topsearch-icon {
    position: absolute;
    left: 13px;
    color: var(--bar-muted);
    pointer-events: none;
}

.sheep-topsearch-input {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--bar-text);
    padding: 0 36px 0 36px;
    font-size: 0.92rem;
    outline: none;
}

    .sheep-topsearch-input::placeholder {
        color: var(--bar-muted);
    }

    .sheep-topsearch-input::-webkit-search-cancel-button {
        display: none;
    }

.sheep-topsearch-close {
    position: absolute;
    right: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bar-muted);
    display: none;
    align-items: center;
    justify-content: center;
}

    .sheep-topsearch.has-text .sheep-topsearch-close,
    .sheep-topsearch.is-open .sheep-topsearch-close {
        display: inline-flex;
    }

    .sheep-topsearch-close:hover {
        background: var(--bar-hover-bg);
        color: var(--bar-hover-text);
    }

@media (max-width: 1199.98px) {
    .sheep-topsearch-box {
        width: 180px;
    }

        .sheep-topsearch.is-open .sheep-topsearch-box,
        .sheep-topsearch-box:focus-within {
            width: 320px;
        }
}

@media (max-width: 991.98px) {
    .sheep-topsearch {
        position: static;
        margin-left: 4px;
    }

    .sheep-topsearch-toggle {
        display: inline-flex;
    }

    .sheep-topsearch-box {
        display: none;
    }

    .sheep-topsearch.is-open .sheep-topsearch-toggle {
        display: none;
    }

    .sheep-topsearch.is-open .sheep-topsearch-box {
        display: flex;
        position: absolute;
        left: 10px;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: 40px;
        z-index: 5;
    }

    /* The pill and the logo give way to the open box. */
    .sheep-topbar:has(.sheep-topsearch.is-open) .sheep-mode,
    .sheep-topbar:has(.sheep-topsearch.is-open) .sheep-topbar-logo {
        visibility: hidden;
    }
}

/* ---------- phones: top-bar mode pill and the round menu button ---------- */
@media (max-width: 991.98px) {
    .sheep-topbar .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sheep-mode-top .sheep-mode-btn {
        padding: 5px 10px;
        font-size: 0.82rem;
        gap: 4px;
    }

    .sheep-topbar .sheep-topbar-theme {
        width: 32px;
        height: 32px;
        font-size: 1.05rem;
    }

    .sheep-topbar .sheep-lang-pill {
        min-width: 34px;
        height: 30px;
        padding: 0 7px;
        font-size: 0.76rem;
    }
}

@media (max-width: 400px) {
    .sheep-mode-top .sheep-mode-btn i {
        display: none;
    }
}

.sheep-bottom-menu-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    line-height: 1.1;
}

    /* Same baseline as the other labels: the icon they sit under is 36 px tall. */
    .sheep-bottom-menu-slot small {
        font-size: .70rem;
        display: block;
        line-height: 1.1;
        margin-top: 29px;
    }

.sheep-bottom-menu {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--sheep-green);
    background: #2f3640;
    color: #fff;
    font-size: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

    .sheep-bottom-menu:active {
        transform: translateX(-50%) scale(0.95);
    }

/* ---------- short landscape screens (a phone on its side): thin bars ---------- */
@media (max-height: 520px) and (orientation: landscape) {
    :root {
        --navbar-height: 44px;
    }

    .sheep-topbar {
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
    }

    .sheep-mode-top .sheep-mode-btn {
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    /* Bottom bar: icons only. */
    .sheep-bottom-nav .nav-link {
        padding: 0.3rem 0.25rem;
    }

    .sheep-bottom-nav small,
    .sheep-bottom-menu-slot small {
        display: none;
    }

    .sheep-bottom-nav .bi {
        font-size: 1.2rem !important;
    }

    .sheep-bottom-menu {
        width: 42px;
        height: 42px;
        top: -10px;
        font-size: 1.1rem;
        border-width: 2px;
    }

    .sheep-bottom-menu-slot {
        min-height: 36px;
    }

    .main-content {
        padding-bottom: 50px;
    }
}

/* ---------- top-bar basket pill (2026-10-10) ---------- */
/* Deep green with an orange count; orange on mouse-over like the rest of the bar. Phones: the
   round bag and its count only. */
.sheep-basket-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 14px 0 12px;
    border-radius: 999px;
    background: var(--sheep-green-deep, var(--sheep-green));
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(6, 129, 37, 0.22);
    transition: background .15s, color .15s, transform .15s;
}

    .sheep-basket-pill:hover,
    .sheep-basket-pill:focus-visible {
        background: var(--sheep-accent);
        color: #202124;
        transform: translateY(-1px);
    }

.sheep-basket-ico {
    position: relative;
    display: inline-flex;
    font-size: 1.1rem;
    line-height: 1;
}

.sheep-basket-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    border: 2px solid var(--bar-bg, #fff);
    background: var(--sheep-accent);
    color: #202124;
    font-size: 0.62rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: sheep-basket-pop .35s ease-out;
}

.sheep-basket-pill:hover .sheep-basket-count,
.sheep-basket-pill:focus-visible .sheep-basket-count {
    background: #fff;
}

@keyframes sheep-basket-pop {
    0% { transform: scale(0.4); }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .sheep-basket-count {
        animation: none;
    }
}

.sheep-basket-label {
    display: none;
}

/* Phones: a floating basket bar above the bottom bar (bag and count, "Basket", total). */
@media (max-width: 575.98px) {
    .sheep-basket-pill {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(var(--bottom-nav-h, 56px) + env(safe-area-inset-bottom) + 12px);
        z-index: 1030;
        height: 48px;
        padding: 0 18px;
        gap: 14px;
        font-size: 0.95rem;
        box-shadow: 0 10px 24px rgba(6, 129, 37, 0.35);
    }

        .sheep-basket-pill.is-page-basket {
            display: none;
        }

    .sheep-basket-label {
        display: inline;
    }

    .sheep-basket-total {
        margin-left: auto;
    }

    body:has(.sheep-basket-pill:not(.is-page-basket)) main {
        padding-bottom: 64px;
    }
}

/* Phones: logo, mode pill, search, basket, bell, day/night, language and account share one row.
   Tighter gaps and 32 px buttons so nothing slides under its neighbour (French labels are the
   longest). The search box keeps room for its round button. */
@media (max-width: 575.98px) {
    .sheep-topbar .ms-auto.gap-2 {
        gap: 4px !important;
    }

    .sheep-topsearch {
        flex-shrink: 0;
    }

    .sheep-topbar .sheep-topbar-icon {
        width: 32px;
        height: 32px;
    }

    /* The mode not chosen shrinks to its icon (its name stays in the tooltip). */
    .sheep-mode-top .sheep-mode-btn:not(.active) span {
        display: none;
    }

    .sheep-mode-top .sheep-mode-btn:not(.active) i {
        display: inline-block !important;
    }

    .sheep-mode-top .sheep-mode-btn.active i {
        display: none;
    }

    .sheep-mode-top .sheep-mode-btn {
        padding: 4px 8px;
        font-size: 0.78rem;
    }

    .sheep-topbar .sheep-lang-pill {
        min-width: 30px;
        padding: 0 5px;
    }
}

/* ---------- "Votre quartier" in the top bar and its popup (2026-10-10) ---------- */
.sheep-addr-btn {
    display: none;
}

@media (min-width: 992px) {
    .sheep-addr-btn {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 42px;
        max-width: 210px;
        padding: 0 10px 0 8px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--bar-text);
        text-decoration: none;
        text-align: left;
        transition: background .15s, color .15s;
    }

        .sheep-addr-btn:hover,
        .sheep-addr-btn:focus-visible {
            background: var(--bar-hover-bg);
            color: var(--bar-hover-text);
        }

        .sheep-addr-btn > .bi-geo-alt-fill {
            color: #068125;
            font-size: 1.1rem;
        }
}

.sheep-addr-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

    .sheep-addr-text small {
        font-size: 0.68rem;
        color: var(--bar-muted);
    }

    .sheep-addr-text strong {
        font-size: 0.84rem;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.sheep-addr-caret {
    font-size: 0.7rem;
    color: var(--bar-muted);
}

.sheep-addr-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 76px 16px 16px;
    background: rgba(32, 33, 36, 0.45);
}

/* The address window, laid out like the model's "Votre zone de recherche" (Benji, 2026-10-12), in
   the site's orange instead of the green: a roomy white card, a big title, "choose an address" with
   "locate me" beside it, a labelled field, light rows for the current and recent addresses, and the
   wide orange button that keeps the current address. */
.sheep-addr-sheet {
    width: min(560px, 100%);
    max-height: calc(100dvh - 96px);
    overflow: auto;
    padding: 28px 30px 30px;
    border-radius: 24px;
    background: var(--surface-bg, #fff);
    color: var(--sheep-dark, #202124);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.sheep-addr-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

    .sheep-addr-head h2 {
        margin: 6px 0 0;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: var(--sheep-dark, #202124);
    }

.sheep-addr-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--sheep-soft, #f5f6f7);
    color: var(--sheep-dark, #202124);
    font-size: 0.9rem;
    transition: background-color .15s ease, color .15s ease;
}

    .sheep-addr-close:hover,
    .sheep-addr-close:focus-visible {
        background: var(--sheep-accent-soft, #e6f4e8);
        color: var(--sheep-accent-ink, #08701f);
    }

.sheep-addr-intro {
    margin: 14px 0 26px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--sheep-gray, #686b72);
}

/* "Choisir une adresse" on the left, "Utiliser ma position" on the right. */
.sheep-addr-choose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 18px;
}

.sheep-addr-subtitle {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sheep-dark, #202124);
}

.sheep-addr-locate {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #dadce0;
    border-radius: 12px;
    background: var(--surface-bg, #fff);
    color: var(--sheep-dark, #202124);
    font-size: 0.82rem;
    font-weight: 700;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

    .sheep-addr-locate .bi {
        font-size: 1.05rem;
        color: var(--sheep-accent-dark, #068125);
    }

    .sheep-addr-locate:hover:not(:disabled),
    .sheep-addr-locate:focus-visible {
        border-color: var(--sheep-accent-line, #bfe2c5);
        background: var(--sheep-accent-soft, #e6f4e8);
        color: var(--sheep-accent-ink, #08701f);
    }

    .sheep-addr-locate:disabled {
        opacity: 0.7;
    }

.sheep-addr-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sheep-dark, #202124);
}

.sheep-addr-field {
    position: relative;
}

    .sheep-addr-field > .bi-search {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--sheep-gray, #686b72);
        pointer-events: none;
    }

    .sheep-addr-field input {
        width: 100%;
        height: 52px;
        padding: 0 16px 0 44px;
        border: 1px solid #dadce0;
        border-radius: 12px;
        background: var(--surface-bg, #fff);
        color: inherit;
        font-size: 0.95rem;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .sheep-addr-field input::placeholder {
            color: #9aa0a6;
        }

        .sheep-addr-field input:focus {
            outline: none;
            border-color: var(--sheep-accent-dark, #068125);
            box-shadow: 0 0 0 4px rgba(var(--sheep-accent-dark-rgb), 0.16);
        }

.sheep-addr-hint {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--sheep-gray, #686b72);
}

.sheep-addr-error {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    font-size: 0.86rem;
}

.sheep-addr-section {
    margin: 22px 0 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sheep-dark, #202124);
}

.sheep-addr-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid #dadce0;
    border-radius: 12px;
    background: var(--surface-bg, #fff);
    color: inherit;
    text-align: left;
    font-size: 0.9rem;
    transition: border-color .15s ease, background-color .15s ease;
}

    .sheep-addr-row + .sheep-addr-row {
        margin-top: 8px;
    }

    .sheep-addr-row span {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sheep-addr-row > .bi {
        color: var(--sheep-gray, #686b72);
    }

    button.sheep-addr-row:hover,
    button.sheep-addr-row:focus-visible {
        border-color: var(--sheep-accent-line, #bfe2c5);
        background: var(--sheep-accent-soft, #e6f4e8);
    }

    /* The address in use: lit in orange, like the model's chosen radius. */
    .sheep-addr-row.is-current {
        border-color: var(--sheep-accent-line, #bfe2c5);
        background: var(--sheep-accent-soft, #e6f4e8);
        font-weight: 600;
    }

        .sheep-addr-row.is-current > .bi-geo-alt-fill,
        .sheep-addr-row.is-current > .sheep-addr-check {
            color: var(--sheep-accent-dark, #068125);
        }

/* Keep the current address: the model's wide button at the bottom, in the site's orange gradient. */
.sheep-addr-cta.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    margin-top: 28px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
}

/* The window lives inside the top bar: while it is open the bar rises above the bottom bar, so the
   dark veil covers both bars and the bottom bar no longer hides the end of the window on phones. */
.sheep-topbar:has(.sheep-addr-overlay) {
    z-index: 1085;
}

[data-theme="dark"] .sheep-addr-locate,
[data-theme="dark"] .sheep-addr-field input,
[data-theme="dark"] .sheep-addr-row {
    border-color: rgba(148, 163, 184, 0.28);
}

@media (max-width: 575.98px) {
    .sheep-addr-overlay {
        padding: 12px;
    }

    .sheep-addr-sheet {
        max-height: calc(100dvh - 24px);
        padding: 22px 18px 20px;
        border-radius: 20px;
    }

    .sheep-addr-head h2 {
        font-size: 1.35rem;
    }

    .sheep-addr-intro {
        margin-bottom: 20px;
    }

    .sheep-addr-cta.btn {
        margin-top: 22px;
    }
}

/* ---------- desktop brand in the top bar (2026-10-10) ---------- */
/* The horizontal logo sits in the top bar's left corner, exactly above the sidebar, so the
   sidebar opens straight on the menu. The dark top bar gets the variant with light lettering. */
.sheep-topbar-brand {
    display: none;
}

@media (min-width: 992px) {
    /* The logo starts 8 px from the edge, as the small sheep does on phones (Benji, 2026-10-13); its
       column still ends where the sidebar does. */
    .sheep-topbar > .container-fluid {
        padding-left: 8px !important;
    }

    .sheep-topbar-brand {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        width: calc(var(--sidebar-expanded) - 8px);
        height: 100%;
        margin-right: 8px;
        text-decoration: none;
    }

        .sheep-topbar-brand img {
            height: 40px;
            width: auto;
            max-width: 100%;
            transition: transform .2s ease;
        }

        .sheep-topbar-brand:hover img {
            transform: translateY(-1px) scale(1.02);
        }

    .sheep-brand-dark {
        display: none;
    }

    [data-theme="dark"] .sheep-brand-light {
        display: none;
    }

    [data-theme="dark"] .sheep-brand-dark {
        display: block;
    }

    /* The sidebar starts on the menu now that the logo lives in the top bar. */
    .sheep-sidebar {
        padding-top: 14px;
    }
}

/* Landing page without an address: delivery / pickup, the search and "Votre quartier" do
   nothing yet, so the top bar drops them. CSS rather than state, so it also holds on the first
   (pre-rendered) paint, before the page is interactive. */
body:has(.ld.ld-no-address) .sheep-mode-top,
body:has(.ld.ld-no-address) .sheep-topsearch,
body:has(.ld.ld-no-address) .sheep-addr-btn {
    display: none !important;
}

/* ---------- phone bottom bar, 2026-10-10 ---------- */
.sheep-bottom-btn {
    border: 0;
    background: transparent;
}

.sheep-bottom-ico {
    position: relative;
    display: inline-block;
}

.sheep-bottom-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    border: 2px solid var(--sheep-green);
    background: var(--sheep-accent);
    color: #202124;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    animation: sheep-basket-pop .35s ease-out;
}

/* Day / night lives in the bottom bar (visitors) or the menu (signed in) on phones. */
@media (max-width: 991.98px) {
    .sheep-topbar .sheep-topbar-theme {
        display: none;
    }
}

/* "Explorer" in the phone bottom bar needs a saved address or position (site.js sets the class). */
html:not(.sm-has-location) .sheep-bottom-explore {
    display: none !important;
}

/* The universes, "all categories" and the map need a place to start from: in the web sidebar and
   phone menu they appear once an address or position is saved (site.js sets the class). */
html:not(.sm-has-location) .sheep-sidebar .nav-cats-divider,
html:not(.sm-has-location) .sheep-sidebar .nav-item:has(> .nav-cat),
html:not(.sm-has-location) .sheep-sidebar .nav-item:has(> .nav-cat-all),
html:not(.sm-has-location) .sheep-offcanvas .nav-cat,
html:not(.sm-has-location) .sheep-offcanvas .nav-cat-all,
html:not(.sm-has-location) .sheep-offcanvas .nav-needs-location {
    display: none !important;
}

/* ---------- order on its way: the tracking is all the customer sees (2026-10-10) ---------- */
/* No sidebar, no bottom bar, no search / delivery switch / address / basket in the top bar:
   the logo and the account stay. "Order something else" sits at the bottom of the page. */
body:has(.otr-focus) .sheep-sidebar,
body:has(.otr-focus) .sheep-bottom-nav,
body:has(.otr-focus) .maui-bottom-nav,
body:has(.otr-focus) .sheep-topbar-center,
body:has(.otr-focus) .sheep-basket-pill {
    display: none !important;
}

@media (min-width: 992px) {
    body:has(.otr-focus) .main-content {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

.otr-else {
    margin: 4px 0 18px;
    text-align: center;
    font-size: 0.85rem;
}

    .otr-else a {
        color: var(--text-muted-color);
        text-decoration: underline;
    }

        .otr-else a:hover {
            color: #068125;
        }

/* ---------- staging / sandbox ribbon (2026-10-13): never mistaken for the live site ---------- */
.sheep-env-ribbon {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2000;
    padding: 3px 12px;
    border-top-right-radius: 10px;
    background: #dc2626;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    pointer-events: none;
    opacity: 0.92;
}

/* Phones and tablets: a small pill hanging under the middle of the top bar, off the logo and the
   buttons (Benji, 2026-10-13: in the corner it covered the sheep). */
@media (max-width: 991.98px) {
    .sheep-env-ribbon {
        bottom: auto;
        top: calc(var(--navbar-height, 56px) - 9px);
        left: 50%;
        transform: translateX(-50%);
        padding: 2px 10px;
        border-radius: 999px;
        font-size: 0.62rem;
        line-height: 1.3;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    }
}

/* ---------- Phone bottom bar, built like CamSafe's (Benji, 2026-10-11) ----------
   Two rows of 44 px icon buttons (a comfortable finger target), 24 px line icons, spread evenly.
   Row 1: Menu, Accueil, the round button, Favoris, Panier. Row 2 (Explorer, Catégories,
   Mes commandes, Compte, Langue) waits below the screen; the round button (label of the hidden
   checkbox #sheep-quick-toggle) slides the bar up to show it, as on CamSafe. */
.sheep-bottom-nav {
    --sheep-bb-size: 44px;
    --sheep-bb-row: 56px;
    background: #fff;
    border: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 16px rgba(6, 129, 37, 0.08);
    padding: 0 0 env(safe-area-inset-bottom);
    z-index: 1030;
    /* Row 2 (56 px) and its separator (1 px) wait below the screen. */
    transform: translateY(57px);
    transition: transform .35s ease;
}

.sheep-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--sheep-bb-row);
    margin: 0;
    padding: 0 18px;
    list-style: none;
}

    .sheep-bottom-row > li {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--sheep-bb-size);
        height: var(--sheep-bb-size);
        flex: 0 0 var(--sheep-bb-size);
    }

.sheep-bottom-sep {
    margin: 0 24px;
    border: 0;
    height: 1px; /* exactly 1 px whatever the screen density, so the slide distance is exact */
    background: rgba(32, 33, 36, 0.08);
    opacity: 1;
}

/* One button: the same 44 x 44 square everywhere, icon centred. */
.sheep-bb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sheep-bb-size);
    height: var(--sheep-bb-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #686b72;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, color .15s ease;
}

    .sheep-bb:hover,
    .sheep-bb:focus-visible {
        color: var(--sheep-green-dark);
    }

    .sheep-bb:focus-visible {
        outline: 2px solid var(--sheep-green-light);
        outline-offset: 2px;
    }

    .sheep-bb.active {
        color: var(--sheep-green-dark);
        background: #f5f6f7;
    }

.sheep-bb-svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sheep-bb.active .sheep-bb-svg {
    stroke-width: 2.1;
}

/* The round button: the same 44 px, dark green, white 3 x 3 grid. */
.sheep-bb-center {
    border-radius: 50%;
    background: var(--sheep-green-dark);
    color: #fff;
    box-shadow: 0 3px 8px rgba(6, 129, 37, 0.28);
}

    .sheep-bb-center:hover,
    .sheep-bb-center:focus-visible {
        color: #fff;
        background: var(--sheep-green-deep);
    }

    .sheep-bb-center .sheep-bb-svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
        stroke: none;
    }

/* The basket count sits on the bag's top-right corner. */
.sheep-bb .sheep-bottom-ico {
    position: relative;
    display: block;
}

.sheep-bb .sheep-bottom-badge {
    top: -7px;
    right: -10px;
    border-color: #fff;
}

/* Row 2 always keeps its five buttons, so its columns line up with row 1. Without a saved address
   Explorer still shows here and opens the address step (the side menu hides it until then). */
html:not(.sm-has-location) .sheep-bottom-quick > li.sheep-bottom-explore {
    display: flex !important;
}

/* Row 2: invisible while the bar is down, fades in as it slides up (0.35 s, like CamSafe). */
.sheep-bottom-quick,
.sheep-bottom-sep {
    opacity: 0;
    transition: opacity .35s ease;
}

.sheep-quick-toggle {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

    .sheep-quick-toggle:checked ~ .sheep-bottom-nav {
        transform: translateY(0);
    }

        .sheep-quick-toggle:checked ~ .sheep-bottom-nav .sheep-bottom-quick,
        .sheep-quick-toggle:checked ~ .sheep-bottom-nav .sheep-bottom-sep {
            opacity: 1;
        }

        .sheep-quick-toggle:checked ~ .sheep-bottom-nav .sheep-bb-center {
            background: var(--sheep-grad-hover);
        }

/* Tapping anywhere outside the bar closes row 2. */
.sheep-quick-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1029;
    margin: 0;
}

.sheep-quick-toggle:checked ~ .sheep-quick-backdrop {
    display: block;
}

/* Language list opens upwards, above the bar. */
.sheep-bb-langs {
    min-width: 11rem;
    margin-bottom: 8px !important;
}

/* Dark theme. */
[data-theme="dark"] .sheep-bottom-nav {
    background: #1b2742;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .sheep-bottom-sep {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sheep-bb {
    color: #9ca8ba;
}

    [data-theme="dark"] .sheep-bb:hover,
    [data-theme="dark"] .sheep-bb.active {
        color: #e9ebee;
    }

    [data-theme="dark"] .sheep-bb.active {
        background: rgba(134, 212, 143, 0.2);
    }

[data-theme="dark"] .sheep-bb-center,
[data-theme="dark"] .sheep-bb-center:hover {
    color: #fff;
    background: var(--sheep-green-light);
}

[data-theme="dark"] .sheep-bb .sheep-bottom-badge {
    border-color: #1b2742;
}

/* A phone on its side: slimmer rows, same layout. */
@media (max-height: 520px) and (orientation: landscape) {
    .sheep-bottom-nav {
        --sheep-bb-size: 38px;
        --sheep-bb-row: 46px;
        transform: translateY(47px); /* row 2 (46 px) and its separator */
    }

    .sheep-bb-svg {
        width: 21px;
        height: 21px;
    }
}

/* ---------- "Se connecter" with words on phones too (2026-10-11) ---------- */
/* Phones: the shorter "Connexion", so the bar fits next to delivery / pickup, search and language. */
.sheep-signin-short {
    display: none;
}

@media (max-width: 575.98px) {
    .sheep-signin-long {
        display: none;
    }

    .sheep-signin-short {
        display: inline;
    }

    /* Words only, a little narrower, so the bar keeps everything on one line. */
    .sheep-topbar-signin {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

        .sheep-topbar-signin .bi {
            display: none;
        }

    .sheep-topbar .ms-auto.gap-2 {
        gap: 4px !important;
    }

}

/* ---------- Language: "FR ⌄", plain text, no circle (Benji, 2026-10-11) ---------- */
.sheep-topbar .sheep-lang-pill {
    min-width: 0;
    height: 32px;
    padding: 0 4px;
    gap: 5px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #686b72;
    font-size: 0.85rem;
    font-weight: 600;
}

    .sheep-topbar .sheep-lang-pill:hover,
    .sheep-topbar .sheep-lang-pill.show {
        background: transparent;
        color: var(--sheep-green-dark);
    }

    /* Bootstrap's own dropdown triangle is replaced by the chevron. */
    .sheep-topbar .sheep-lang-pill::after {
        display: none;
    }

.sheep-lang-caret {
    font-size: 0.7rem;
    -webkit-text-stroke: 0.4px;
}

[data-theme="dark"] .sheep-topbar .sheep-lang-pill {
    color: #9ca8ba;
}

@media (max-width: 575.98px) {
    /* Phones: the language a little tighter (after the rule above, so it wins). */
    .sheep-topbar .sheep-lang-pill {
        padding: 0 2px;
        gap: 3px;
    }
}

/* ---------- Phones: the full logo, as on desktop (Benji, 2026-10-11) ---------- */
@media (max-width: 991.98px) {
    .sheep-topbar-brand {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        margin-right: 8px;
    }

        .sheep-topbar-brand img {
            height: 28px;
            width: auto;
        }

    .sheep-brand-dark {
        display: none;
    }

    [data-theme="dark"] .sheep-brand-light {
        display: none;
    }

    [data-theme="dark"] .sheep-brand-dark {
        display: block;
    }

    /* The search box opens over the bar: the logo steps aside, as the small one did. */
    .sheep-topbar:has(.sheep-topsearch.is-open) .sheep-topbar-brand {
        visibility: hidden;
    }
}

/* Phones: delivery / pickup leaves the top bar for the full logo (it sits in the shop list instead). */
@media (max-width: 991.98px) {
    .sheep-topbar .sheep-mode-top {
        display: none !important;
    }
}

/* ---------- Phone menu, Benji's white model (2026-10-11) ----------
   White, no logo: a big title and a round close button; small grey uppercase headings; 22 px line
   icons with dark labels on 48 px rows; the current page on a beige tab with a thin orange mark;
   hairline separators; "Univers" and "Sheep-Me" fold with a count and a chevron. */
.offcanvas-start.sheep-offcanvas {
    width: 86% !important;
    max-width: 340px;
}

.sheep-offcanvas {
    --oc-text: #202124;
    --oc-muted: #686b72;
    --oc-line: #e2e8f0;
    --oc-active: #f5f6f7;
    --oc-mark: var(--sheep-accent);
    --oc-hover: #f5f6f7;
    background: #fff;
    color: var(--oc-text);
}

    .sheep-offcanvas .offcanvas-header {
        padding: 22px 14px 10px 16px;
        border-bottom: 0;
    }

    .sheep-offcanvas .offcanvas-body {
        padding: 6px 14px calc(18px + env(safe-area-inset-bottom));
    }

.sheep-oc-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--oc-text);
}

.sheep-oc-close {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--oc-line);
    border-radius: 50%;
    background: #fff;
    color: #5f6368;
    transition: background-color .15s ease;
}

    .sheep-oc-close:hover {
        background: var(--oc-hover);
    }

    .sheep-oc-close svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
    }

.sheep-offcanvas .sheep-oc {
    gap: 10px;
}

.sheep-offcanvas .sheep-oc-group {
    gap: 2px;
}

.sheep-offcanvas .sheep-oc-heading {
    padding: 10px 14px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--oc-muted);
    opacity: 1;
}

.sheep-offcanvas .sheep-oc-link {
    position: relative;
    gap: 16px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--oc-text);
    font-size: 0.95rem;
    font-weight: 600;
}

    .sheep-offcanvas .sheep-oc-link:hover,
    .sheep-offcanvas .sheep-oc-link:focus-visible {
        background: var(--oc-hover);
        color: var(--oc-text);
    }

    .sheep-offcanvas .sheep-oc-link.active {
        background: var(--oc-active);
        color: var(--oc-text);
        font-weight: 700;
    }

        /* The thin orange mark, inside the tab's rounded left edge. */
        .sheep-offcanvas .sheep-oc-link.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            bottom: 8px;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: var(--oc-mark);
        }

.sheep-oc-svg,
.sheep-offcanvas .sheep-oc-link .nav-cat-ico .hf-ico {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sheep-offcanvas .sheep-oc-link .nav-cat-ico {
    width: 22px;
    flex: 0 0 22px;
}

.sheep-oc-sep {
    margin: 8px 12px;
    border: 0;
    height: 1px;
    background: var(--oc-line);
    opacity: 1;
}

/* A folding section: the heading, its count and a chevron. */
.sheep-oc-section {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px 0 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--oc-muted);
}

    .sheep-oc-section .sheep-oc-heading {
        flex: 1 1 auto;
        padding-top: 6px;
        padding-bottom: 6px;
    }

.sheep-oc-count {
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #f5f6f7;
    color: #686b72;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.sheep-oc-chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.sheep-oc-section.collapsed .sheep-oc-chevron {
    transform: rotate(-90deg);
}

.sheep-offcanvas .sheep-oc-pref {
    min-height: 48px;
    padding: 6px 14px;
    color: var(--oc-text);
    font-size: 0.95rem;
}

    .sheep-offcanvas .sheep-oc-pref > span {
        gap: 16px;
    }

.sheep-offcanvas .sheep-lang-chip {
    min-width: 36px;
    height: 30px;
    border: 1px solid var(--oc-line);
    background: #fff;
    color: #5f6368;
}

    .sheep-offcanvas .sheep-lang-chip.active {
        background: var(--sheep-green-dark);
        border-color: var(--sheep-green-dark);
        color: #fff;
    }

.sheep-offcanvas .sheep-oc-danger,
.sheep-offcanvas .sheep-oc-danger:hover {
    color: #b42318;
}

.sheep-offcanvas .sheep-oc-legal {
    padding: 10px 14px 0;
}

    .sheep-offcanvas .sheep-oc-legal a {
        color: var(--oc-muted);
    }

        .sheep-offcanvas .sheep-oc-legal a:hover {
            color: var(--oc-text);
        }

/* Dark theme: the same layout on the bottom bar's dark green-grey. */
[data-theme="dark"] .sheep-offcanvas {
    --oc-text: #e9ebee;
    --oc-muted: #9ca8ba;
    --oc-line: rgba(255, 255, 255, 0.09);
    --oc-active: rgba(255, 255, 255, 0.07);
    --oc-hover: rgba(255, 255, 255, 0.05);
    background: #1b2742;
}

[data-theme="dark"] .sheep-oc-close,
[data-theme="dark"] .sheep-offcanvas .sheep-lang-chip {
    background: transparent;
    color: #d5d8dc;
}

[data-theme="dark"] .sheep-oc-count {
    background: rgba(255, 255, 255, 0.08);
    color: #9ca8ba;
}

[data-theme="dark"] .sheep-offcanvas .sheep-oc-danger {
    color: #fca5a5;
}

/* ---------- Search window, Benji's model (2026-10-11) ----------
   The top bar keeps only a round search button (every screen size); it opens a window with the
   title, the field, a few category ideas and "Voir tous les résultats". Sizes and colours copied
   from the model (sheep-me-lausanne): 640 px wide, 23 px corners, 58 px field, 49 px pictures. */
.sheep-topsearch .sheep-topsearch-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e9ebee;
    border-radius: 50%;
    background: #fff;
    color: #202124;
}

    .sheep-topsearch .sheep-topsearch-toggle:hover {
        background: #f5f6f7;
        color: #202124;
    }

.sheep-topsearch-box {
    display: none !important;
}

.sheep-search-svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sheep-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(36, 29, 25, 0.33);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.sheep-search-dialog {
    width: min(640px, 100%);
    max-height: 85dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px;
    border-radius: 23px;
    background: #fff;
    color: #202124;
    box-shadow: 0 30px 100px rgba(24, 54, 41, 0.19);
}

.sheep-search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

    .sheep-search-head h2 {
        margin: 0;
        font-size: 25px;
        font-weight: 600;
        letter-spacing: -0.045em;
        color: #202124;
    }

.sheep-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-radius: 50%;
    background: #f5f6f7;
    color: #202124;
}

    .sheep-search-close svg,
    .sheep-search-clear svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
    }

.sheep-search-field {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #9aa0a6;
    border-radius: 13px;
    background: #f5f6f7;
    color: #202124;
    cursor: text;
}

    .sheep-search-field:focus-within {
        outline: 2px solid var(--sheep-accent);
        outline-offset: 2px;
    }

    .sheep-search-field .sheep-search-svg {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }

    .sheep-search-field input {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        border: 0;
        outline: none;
        background: none;
        color: #202124;
        font-size: 16px; /* 16 px or more: iPhones do not zoom into the field */
    }

        .sheep-search-field input::placeholder {
            color: #686b72;
        }

        .sheep-search-field input::-webkit-search-cancel-button {
            display: none;
        }

.sheep-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e9ebee;
    color: #202124;
}

    .sheep-search-clear svg {
        width: 16px;
        height: 16px;
    }

.sheep-search-help {
    margin: 16px 0;
    font-size: 12px;
    color: #686b72;
}

.sheep-search-results {
    display: grid;
    gap: 6px;
    margin: 5px 0 20px;
}

.sheep-search-result {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 67px;
    padding: 9px;
    border-radius: 12px;
    color: #202124;
    text-decoration: none;
}

    .sheep-search-result:hover,
    .sheep-search-result:focus-visible {
        background: #f5f6f7;
        color: #202124;
    }

.sheep-search-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    border-radius: 12px;
    background: #f5f6f7;
}

    .sheep-search-img .hf-ico,
    .sheep-search-img img {
        width: 34px;
        height: 34px;
    }

.sheep-search-text {
    flex: 1 1 auto;
    min-width: 0;
}

    .sheep-search-text b {
        display: block;
        font-size: 14px;
        font-weight: 600;
    }

    .sheep-search-text small {
        display: block;
        margin-top: 4px;
        font-size: 11px;
        color: #686b72;
    }

.sheep-search-go {
    flex: 0 0 auto;
    font-size: 15px;
}

.sheep-search-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    min-height: 50px;
    padding: 14px 21px;
    border: 0;
    border-radius: 14px;
    background: var(--sheep-accent);
    color: #ffffff;
    font-size: 14px;
    font-weight: 650;
}

    .sheep-search-all:hover {
        background: var(--sheep-accent-dark);
        color: #392b23;
    }

/* Phones and small tablets: the window sits at the top, 12 px from the edges. */
@media (max-width: 760px) {
    .sheep-search-overlay {
        align-items: flex-start;
        padding: 12px;
    }

    .sheep-search-dialog {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 21px;
        border-radius: 20px;
    }

    .sheep-search-head {
        margin-bottom: 16px;
    }

        .sheep-search-head h2 {
            font-size: 22px;
        }

    .sheep-search-field {
        height: 54px;
    }

    .sheep-search-results {
        gap: 3px;
        margin-bottom: 16px;
    }

    .sheep-search-result {
        min-height: 62px;
    }

    .sheep-search-img {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

        .sheep-search-img .hf-ico,
        .sheep-search-img img {
            width: 30px;
            height: 30px;
        }

    .sheep-search-text b {
        font-size: 13px;
    }
}

/* Phones: the search button keeps the bar's 32 px so everything still fits on one line. */
@media (max-width: 575.98px) {
    .sheep-topsearch .sheep-topsearch-toggle {
        width: 32px;
        height: 32px;
        border-color: transparent;
        background: #f5f6f7;
    }

        .sheep-topsearch .sheep-topsearch-toggle .sheep-search-svg {
            width: 17px;
            height: 17px;
        }
}

/* Dark theme (the model's dark colours). */
[data-theme="dark"] .sheep-search-overlay {
    background: rgba(0, 0, 0, 0.53);
}

[data-theme="dark"] .sheep-search-dialog,
[data-theme="dark"] .sheep-search-head h2,
[data-theme="dark"] .sheep-search-result,
[data-theme="dark"] .sheep-search-field,
[data-theme="dark"] .sheep-search-field input {
    color: #e9ebee;
}

[data-theme="dark"] .sheep-search-dialog {
    background: #1b2742;
}

[data-theme="dark"] .sheep-search-close,
[data-theme="dark"] .sheep-search-field,
[data-theme="dark"] .sheep-search-img,
[data-theme="dark"] .sheep-search-result:hover,
[data-theme="dark"] .sheep-topsearch .sheep-topsearch-toggle {
    background: #282f3e;
    color: #e9ebee;
}

[data-theme="dark"] .sheep-search-field {
    border-color: #333c4d;
}

    [data-theme="dark"] .sheep-search-field input::placeholder,
    [data-theme="dark"] .sheep-search-help,
    [data-theme="dark"] .sheep-search-text small {
        color: #9ca8ba;
    }

[data-theme="dark"] .sheep-search-clear {
    background: #333c4d;
    color: #e9ebee;
}

[data-theme="dark"] .sheep-search-all {
    background: var(--sheep-accent);
    color: #ffffff;
}

    [data-theme="dark"] .sheep-search-all:hover {
        background: var(--sheep-accent);
    }

/* The window lives in the top bar: while it is open the bar goes above the bottom bar, so the
   veil and the window cover the whole screen. */
.sheep-topbar:has(.sheep-search-overlay) {
    z-index: 1080;
}

.sheep-search-go {
    display: inline-flex;
    align-items: center;
}

    .sheep-search-go svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ---------- Desktop sidebar, white like the phone menu (Benji's model, 2026-10-12) ----------
   White panel with a hairline on its right, small grey uppercase headings, 22 px line icons with
   dark labels on 48 px rows, the current page on a beige tab with a thin orange mark. */
.sheep-sidebar {
    --oc-text: #202124;
    --oc-muted: #686b72;
    --oc-line: #e2e8f0;
    --oc-active: #f5f6f7;
    --oc-mark: var(--sheep-accent);
    --oc-hover: #f5f6f7;
    background: #fff;
    color: var(--oc-text);
    border-right: 1px solid var(--oc-line);
}

@media (min-width: 992px) {
    .sheep-sidebar {
        box-shadow: none;
        padding-top: 10px;
    }
}

.sheep-sidebar .sheep-side-heading {
    padding: 14px 26px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--oc-muted);
    white-space: nowrap;
}

.sheep-sidebar .nav-link {
    position: relative;
    gap: 16px;
    min-height: 48px;
    margin: 1px 12px;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--oc-text);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
}

    .sheep-sidebar .nav-link span {
        margin-left: 0;
    }

    .sheep-sidebar .nav-link:hover,
    .sheep-sidebar .nav-link:focus-visible {
        color: var(--oc-text) !important;
        background: var(--oc-hover);
    }

        .sheep-sidebar .nav-link:hover i {
            color: inherit;
        }

    .sheep-sidebar .nav-link.active,
    .sheep-sidebar .nav-link[aria-current="page"],
    .sheep-sidebar .nav-link.nav-cat.active {
        color: var(--oc-text) !important;
        background: var(--oc-active);
        box-shadow: none;
        font-weight: 700;
    }

        .sheep-sidebar .nav-link.active i,
        .sheep-sidebar .nav-link.nav-cat.active i {
            color: inherit;
        }

        /* The thin orange mark, inside the tab's rounded left edge. */
        .sheep-sidebar .nav-link.active::before,
        .sheep-sidebar .nav-link[aria-current="page"]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            bottom: 8px;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: var(--oc-mark);
        }

.sheep-sidebar .nav-link .nav-cat-ico {
    display: inline-flex;
    width: 22px;
    flex: 0 0 22px;
    font-size: 1rem;
}

    .sheep-sidebar .nav-link .nav-cat-ico .hf-ico {
        display: block;
        width: 22px;
        height: 22px;
        stroke-width: 1.75;
    }

.sheep-sidebar .nav-cats-divider {
    height: 1px;
    margin: 10px 24px;
    background: var(--oc-line);
}

/* The universes' heading appears with them, once an address or position is known. */
html:not(.sm-has-location) .sheep-sidebar .nav-cats-heading {
    display: none !important;
}

/* "Bon appétit !": the handwritten words and the heart stay, quietly, on white. */
.sheep-sidebar-art {
    height: 96px;
    background: none;
}

    .sheep-sidebar-art::before,
    .sheep-sidebar-art::after {
        display: none;
    }

.sheep-sidebar-art-text {
    left: 26px;
    bottom: 30px;
    font-size: 1.6rem;
    color: #9aa0a6;
    text-shadow: none;
}

.sheep-sidebar-art-heart {
    left: 132px;
    bottom: 36px;
    color: var(--oc-mark);
    font-size: 1rem;
}

/* Dark theme: the same panel on the dark green-grey of the bars. */
[data-theme="dark"] .sheep-sidebar {
    --oc-text: #e9ebee;
    --oc-muted: #9ca8ba;
    --oc-line: rgba(255, 255, 255, 0.09);
    --oc-active: rgba(255, 255, 255, 0.07);
    --oc-hover: rgba(255, 255, 255, 0.05);
    background: #1b2742;
}

[data-theme="dark"] .sheep-sidebar-art-text {
    color: #9ca8ba;
}

/* ---------- Model design (sheep-me-lausanne): colours, bars and menus (Benji, 2026-10-12) ----------
   White pages and neutral greys. The model's green (#068125) for small accents (icons, the address
   pin, links); orange for what the customer can do: the main buttons are an orange gradient with
   white text and icons (Benji's "Accueil" picture), the chosen item of a bar is pale orange with
   dark orange text. Inter for the text, Georgia for the big titles.
   Desktop keeps the white sidebar on the left, with the side menu's content; the bottom bar is for
   phones and tablets (Benji, 2026-10-12). See C:\_SC\MODELE-COULEURS.md. */
:root {
    --sheep-green: #068125;
    --sheep-green-dark: #08701f;
    --sheep-green-light: #2fae40;
    --sheep-green-deep: #068125;
    --sheep-green-soft: #e6f4e8;
    --sheep-orange: #ef8839;
    --sheep-orange-dark: #e76423;
    /* The main colour, green since 2026-10-12 (Benji); orange stays for promotions and warnings. */
    --sheep-accent: #0f8b27;
    --sheep-accent-dark: #068125;
    --sheep-accent-ink: #08701f;
    --sheep-accent-soft: #e6f4e8;
    --sheep-accent-line: #bfe2c5;
    --sheep-accent-light: #1a9524; /* the light end of the gradient */
    --sheep-accent-pale: #d3ecd7;
    /* The same colours as numbers, for rgba(): the stylesheets never write a green by hand, so the
       whole site can swap to orange (the choice in the profile, 2026-10-12). */
    --sheep-accent-rgb: 15, 139, 39;
    --sheep-accent-dark-rgb: 6, 129, 37;
    --sheep-accent-ink-rgb: 8, 112, 31;
    --sheep-accent-light-rgb: 26, 149, 36;
    --sheep-orange-rgb: 239, 136, 57;
    --sheep-orange-dark-rgb: 231, 100, 35;
    --sheep-orange-ink-rgb: 169, 74, 28;
    --sheep-orange-light-rgb: 243, 159, 63;
    --sheep-orange-ink: #a94a1c;
    --sheep-orange-soft: #fdf0e4;
    --sheep-orange-line: #f6d3b4;
    /* The buttons: Benji's gradient, white text and icons on it. */
    --sheep-grad: linear-gradient(180deg, #1a9524 0%, #0f8b27 55%, #068125 100%); /* deep to lighter green; white words stay readable (2026-10-12) */
    --sheep-grad-hover: linear-gradient(180deg, #2fae40 0%, #0c8223 55%, #04761f 100%); /* a touch deeper than --sheep-grad; also what a tapped button keeps on touch screens (2026-10-12) */
    --sheep-grad-deep: linear-gradient(180deg, #1a9524 0%, #0c8223 100%); /* the bottom bar's open disc in the dark theme */
    --sheep-grad-second: linear-gradient(180deg, #f39f3f 0%, #ef8839 50%, #e76423 100%); /* the other colour's glossy gradient, the logo's orange (pickup, 2026-10-14; the fourth logo's tones since the night) */
    --sheep-grad-second-hover: linear-gradient(180deg, #ea9637 0%, #e67d30 50%, #da5a1e 100%);
    --sheep-ink: #ffffff;
    --sheep-heading: #202124;
    --sheep-dark: #202124;
    --sheep-gray: #686b72;
    --sheep-line: #e9ebee;
    --sheep-soft: #f2f5f9;
    --sheep-serif: Georgia, "Times New Roman", serif;
    --text-muted-color: #686b72;
    --sheep-light-bg: #ffffff;
    --surface-bg-soft: #f2f5f9;
    --surface-bg-accent: #f2f5f9;
    --surface-border: #e9ebee;
    --surface-border-strong: #dadce0;
    --radius: 14px;
    --bar-bg: #ffffff;
    --bar-border: #e9ebee;
    --bar-text: #202124;
    --bar-muted: #686b72;
    --bar-accent: var(--sheep-accent-ink);
    --bar-accent-bg: var(--sheep-accent-soft);
    --bar-hover-bg: #f5f6f7;
    --bar-hover-text: #202124;
    --bar-mark: var(--sheep-accent);
    --bar-pill-bg: #f5f6f7;
    --bar-pill-active-bg: var(--sheep-accent-soft);
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #202124;
    --bs-body-color-rgb: 32, 33, 36;
    --bs-secondary-color: #686b72;
    --bs-border-color: #e9ebee;
    --bs-link-color: #068125;
    --bs-link-color-rgb: 6, 129, 37;
    --bs-link-hover-color: #08701f;
    --bs-link-hover-color-rgb: 8, 112, 31;
}

/* Dark: a lighter green and orange that read on the dark background; buttons keep the gradient. */
[data-theme="dark"] {
    --sheep-green: #45bf55;
    --sheep-green-dark: #2fae40;
    --sheep-green-light: #86d48f;
    --sheep-green-deep: #45bf55;
    --sheep-green-soft: rgba(134, 212, 143, 0.14);
    --sheep-orange: #f5a04d;
    --sheep-orange-dark: #ef8839;
    --sheep-orange-ink: #f9c792;
    --sheep-orange-soft: rgba(239, 136, 57, 0.16);
    --sheep-accent: #45bf55;
    --sheep-accent-dark: #2fae40;
    --sheep-accent-ink: #a6e2ae;
    --sheep-accent-soft: rgba(134, 212, 143, 0.16);
    --sheep-accent-line: rgba(134, 212, 143, 0.35);
    --sheep-accent-light: #86d48f;
    --sheep-accent-pale: #d3ecd7;
    --sheep-accent-rgb: 69, 191, 85;
    --sheep-accent-dark-rgb: 47, 174, 64;
    --sheep-accent-ink-rgb: 166, 226, 174;
    --sheep-accent-light-rgb: 134, 212, 143;
    --sheep-orange-rgb: 245, 160, 77;
    --sheep-orange-dark-rgb: 239, 136, 57;
    --sheep-orange-ink-rgb: 249, 199, 146;
    --sheep-orange-light-rgb: 246, 179, 102;
    --sheep-orange-line: rgba(245, 160, 77, 0.42);
    --sheep-heading: inherit;
    /* The model block above set the page's text dark for the light theme; the dark theme needs its
       own again (the account pages' labels were dark on dark, Benji, 2026-10-13). */
    --sheep-dark: #e9ebee;
    --bs-body-color: #e9ebee;
    --bs-body-color-rgb: 233, 235, 238;
    --sheep-line: rgba(148, 163, 184, 0.18);
    --sheep-soft: #1b2742;
    --sheep-light-bg: #111a2b;
    --surface-bg-soft: #1b2742;
    --bar-accent: var(--sheep-accent-ink);
    --bar-accent-bg: rgba(var(--sheep-accent-rgb), 0.16);
    --bar-hover-bg: rgba(255, 255, 255, 0.06);
    --bar-hover-text: #e9ebee;
    --bar-mark: var(--sheep-accent);
    --bar-pill-bg: rgba(255, 255, 255, 0.07);
    --bar-pill-active-bg: rgba(var(--sheep-accent-rgb), 0.16);
    --bs-link-color: #86d48f;
    --bs-link-color-rgb: 134, 212, 143;
    --bs-link-hover-color: #a5dfb1;
    --bs-link-hover-color-rgb: 165, 223, 177;
}

/* ---- top bar: white, no line, a very soft shadow ---- */
.sheep-topbar {
    border-bottom: 0;
    box-shadow: 0 3px 16px rgba(22, 33, 25, 0.05);
}

[data-theme="dark"] .sheep-topbar {
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.35);
}

/* Delivery / pickup: the model's grey track, the chosen side pale orange with a thin orange line. */
.sheep-mode {
    border-radius: 11px;
    padding: 3px;
    background: var(--bar-pill-bg);
}

.sheep-mode-btn {
    border-radius: 8px;
    color: var(--bar-muted);
    font-weight: 600;
}

    .sheep-mode-btn:hover {
        color: var(--bar-text);
    }

    .sheep-mode-btn.active {
        background: var(--bar-pill-active-bg);
        color: var(--bar-accent);
        box-shadow: inset 0 0 0 1px var(--sheep-accent-line);
    }

/* Search: a round white button with a hairline, as on the model. */
.sheep-topbar .sheep-topsearch-toggle {
    border: 1px solid var(--bar-border);
    background: var(--bar-bg);
    color: var(--bar-text);
}

    .sheep-topbar .sheep-topsearch-toggle:hover,
    .sheep-topbar .sheep-topsearch-toggle:focus-visible {
        background: var(--bar-hover-bg);
    }

/* "Votre quartier": grey caption, dark address, the green pin. */
.sheep-addr-text strong {
    font-weight: 650;
}

/* Desktop: as on the model, delivery / pickup, then the address, then the search, on the right. */
@media (min-width: 992px) {
    .sheep-topbar-center {
        justify-content: flex-end;
        gap: 14px;
    }

        .sheep-topbar-center .sheep-mode-top {
            order: 1;
        }

        .sheep-topbar-center .sheep-addr-btn {
            order: 2;
        }

        .sheep-topbar-center .sheep-topsearch {
            order: 3;
            flex: 0 0 auto;
            margin-left: 0;
        }

    .sheep-topbar .sheep-topsearch-toggle {
        width: 42px;
        height: 42px;
    }

    .sheep-mode-top .sheep-mode-btn {
        padding: 7px 13px;
        font-size: 0.8rem;
    }
}

/* ---- bottom bar: the model's dock ----
   White, rounded top corners, a soft shadow upwards; grey line icons; the current page on pale
   orange with dark orange icon; the round button is the orange gradient with a white ring
   (dark once row 2 is open). Same sizes as before (44 px buttons, 56 px rows), still no words.
   Phones and tablets only. */
.sheep-bottom-nav {
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -4px 22px rgba(32, 33, 36, 0.07);
}

.sheep-bb {
    border-radius: 12px;
    color: #686b72;
}

    .sheep-bb:hover,
    .sheep-bb:focus-visible {
        color: #202124;
    }

    .sheep-bb:focus-visible {
        outline-color: var(--sheep-accent-line);
    }

    .sheep-bb.active {
        background: var(--sheep-accent-soft);
        color: var(--sheep-accent-ink);
    }

.sheep-bb-center {
    border-radius: 50%;
    background: var(--sheep-grad);
    color: #fff;
    box-shadow: 0 0 0 5px #fff, 0 6px 14px rgba(var(--sheep-accent-dark-rgb), 0.28);
}

    .sheep-bb-center:hover,
    .sheep-bb-center:focus-visible {
        background: var(--sheep-grad-hover);
        color: #fff;
    }

/* Open (the cross): the same green gradient, a touch deeper, instead of the black disc (Benji, 2026-10-12). */
.sheep-quick-toggle:checked ~ .sheep-bottom-nav .sheep-bb-center {
    background: var(--sheep-grad-hover);
    box-shadow: 0 0 0 5px #fff, 0 6px 14px rgba(var(--sheep-accent-dark-rgb), 0.28);
}

[data-theme="dark"] .sheep-bottom-nav {
    box-shadow: 0 -4px 22px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .sheep-bb {
    color: #9ca8ba;
}

    [data-theme="dark"] .sheep-bb:hover {
        color: #e9ebee;
    }

    [data-theme="dark"] .sheep-bb.active {
        background: var(--sheep-accent-soft);
        color: var(--sheep-accent-ink);
    }

[data-theme="dark"] .sheep-bb-center,
[data-theme="dark"] .sheep-bb-center:hover {
    background: var(--sheep-grad);
    color: #fff;
    box-shadow: 0 0 0 5px #1b2742;
}

[data-theme="dark"] .sheep-quick-toggle:checked ~ .sheep-bottom-nav .sheep-bb-center {
    background: var(--sheep-grad-deep);
    color: #fff;
    box-shadow: 0 0 0 5px #1b2742;
}

/* ---- search window: the button is the gradient too ---- */
.sheep-search-all,
[data-theme="dark"] .sheep-search-all {
    background: var(--sheep-grad);
    color: #fff;
}

    .sheep-search-all:hover,
    [data-theme="dark"] .sheep-search-all:hover {
        background: var(--sheep-grad-hover);
        color: #fff;
    }

/* ---- footer: the model's light grey band, above the bottom bar ---- */
.main-content {
    padding-bottom: 0 !important;
}

.main-content .sheep-public-footer {
    margin-top: 40px;
    background: var(--sheep-soft);
    border-top: 1px solid var(--sheep-line);
    color: var(--bar-muted);
    font-size: 0.8rem;
}

    .main-content .sheep-public-footer .sheep-public-footer-inner {
        padding: 28px 20px calc(28px + 64px + env(safe-area-inset-bottom));
        gap: 14px;
    }

    .main-content .sheep-public-footer .sheep-public-footer-company strong {
        color: var(--bar-text);
    }

    .main-content .sheep-public-footer .sheep-public-footer-links a {
        color: var(--bar-text);
        font-weight: 550;
    }

@media (min-width: 768px) {
    .main-content .sheep-public-footer .sheep-public-footer-inner {
        padding-left: 32px;
        padding-right: 32px;
    }
}

[data-theme="dark"] .main-content .sheep-public-footer {
    background: #152037;
}

/* ---- bottom bar opened, as on the model (Benji, 2026-10-12) ----
   Dark grey line icons, like the other menus (Benji: no green here); the current page keeps its
   pale orange square with a dark orange icon, as in the side menu. The quick links
   below the separator on two rows of three; the round button turns dark with a cross while they
   are open. The bar now waits 1 px (separator) + 112 px (two 50 px rows and 6 px above and below)
   below the screen. */
.sheep-bottom-nav {
    --sheep-bb-quick-row: 50px;
    --sheep-bb-quick-pad: 6px;
    transform: translateY(113px);
}

.sheep-bb {
    color: #3c4043;
}

    .sheep-bb:hover,
    .sheep-bb:focus-visible {
        color: #202124;
    }

    .sheep-bb.active,
    .sheep-bb.active:hover {
        color: var(--sheep-accent-ink);
    }

/* The round button keeps its white icon on the orange gradient. */
.sheep-bb-center,
.sheep-bb-center:hover,
.sheep-bb-center:focus-visible {
    color: #fff;
}

.sheep-bottom-row.sheep-bottom-quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: var(--sheep-bb-quick-row);
    align-items: center;
    height: auto;
    padding: var(--sheep-bb-quick-pad) 18px;
}

    .sheep-bottom-row.sheep-bottom-quick > li {
        justify-self: center;
    }

/* The round button: the grid when closed, a cross on the deeper green disc when open. */
.sheep-bb-center .sheep-bb-x {
    display: none;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

.sheep-quick-toggle:checked ~ .sheep-bottom-nav .sheep-bb-center .sheep-bb-svg:not(.sheep-bb-x) {
    display: none;
}

.sheep-quick-toggle:checked ~ .sheep-bottom-nav .sheep-bb-center .sheep-bb-x {
    display: block;
}

.sheep-quick-toggle:checked ~ .sheep-bottom-nav .sheep-bb-center {
    background: var(--sheep-grad-hover);
    color: #fff;
}

[data-theme="dark"] .sheep-bb {
    color: #d5d8dc;
}

    [data-theme="dark"] .sheep-bb:hover {
        color: #ffffff;
    }

    [data-theme="dark"] .sheep-bb.active {
        color: var(--sheep-accent-ink);
    }

[data-theme="dark"] .sheep-bb-center,
[data-theme="dark"] .sheep-bb-center:hover {
    color: #fff;
}

/* A phone on its side: 44 px quick rows and 4 px around them (1 + 96 px below the screen). */
@media (max-height: 520px) and (orientation: landscape) {
    .sheep-bottom-nav {
        --sheep-bb-quick-row: 44px;
        --sheep-bb-quick-pad: 4px;
        transform: translateY(97px);
    }
}

/* ---- side menu, as in the model's category drawer (Benji, 2026-10-12) ----
   Rounded right edge and a soft shadow; 44 px rows with small labels; the current page pale
   orange with dark orange text and an orange edge (as the bars); each universe folds open on its
   categories, each picture on a light grey square (56 px rows); the counts on pale green. */
.offcanvas-start.sheep-offcanvas {
    max-width: 320px;
    border-right: 0;
    border-radius: 0 22px 22px 0;
    box-shadow: 0 30px 100px rgba(24, 54, 41, 0.19);
}

.sheep-offcanvas {
    --oc-active: var(--sheep-accent-soft);
    --oc-active-text: var(--sheep-accent-ink);
    --oc-mark: var(--sheep-accent);
    --oc-hover: #f5f6f7;
    --oc-art: #f5f6f7;
    --oc-count: #f0f3ea;
}

    .sheep-offcanvas .offcanvas-header {
        padding: 26px 18px 12px 28px;
    }

    .sheep-offcanvas .offcanvas-body {
        padding: 4px 18px calc(30px + env(safe-area-inset-bottom));
    }

.sheep-oc-title {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.045em;
}

.sheep-oc-close {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: var(--sheep-green);
}

    .sheep-oc-close svg {
        width: 18px;
        height: 18px;
    }

.sheep-offcanvas .sheep-oc-heading {
    padding: 10px 10px 8px;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
}

.sheep-offcanvas .sheep-oc-link {
    gap: 11px;
    min-height: 44px;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 550;
}

    .sheep-offcanvas .sheep-oc-link.active {
        background: var(--oc-active);
        color: var(--oc-active-text);
        font-weight: 750;
        box-shadow: inset 3px 0 0 var(--oc-mark);
    }

        .sheep-offcanvas .sheep-oc-link.active::before {
            display: none;
        }

.sheep-offcanvas .sheep-oc-pref {
    padding: 6px 10px;
    font-size: 0.8rem;
}

/* Folding headings: small grey capitals, the count on pale green, a chevron. */
.sheep-offcanvas .sheep-oc-section {
    min-height: 39px;
    padding-right: 10px;
}

    .sheep-offcanvas .sheep-oc-section .sheep-oc-heading {
        padding: 8px 10px 9px;
        font-size: 0.68rem;
        font-weight: 750;
        letter-spacing: 0.07em;
    }

.sheep-offcanvas .sheep-oc-count {
    min-width: 0;
    height: auto;
    padding: 3px 6px;
    border-radius: 8px;
    background: var(--oc-count);
    color: var(--oc-muted);
    font-size: 0.56rem;
    font-weight: 500;
    line-height: 1.5;
}

.sheep-offcanvas .sheep-oc-chevron {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
}

.sheep-offcanvas .sheep-oc-cats {
    margin: 4px 0 6px;
}

/* A category: its picture on a light grey square. */
.sheep-offcanvas .sheep-oc-cat {
    min-height: 56px;
    font-size: 0.75rem;
}

.sheep-oc-cat-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: var(--oc-art);
}

    .sheep-oc-cat-art .hf-ico-art {
        width: 32px;
        height: 32px;
    }

    .sheep-oc-cat-art.sheep-oc-cat-all {
        background: var(--sheep-green-soft);
    }

        .sheep-oc-cat-art.sheep-oc-cat-all .hf-ico {
            width: 20px;
            height: 20px;
            color: var(--sheep-green);
        }

.sheep-offcanvas .sheep-oc-cat.active .sheep-oc-cat-art {
    background: #fff;
}

.sheep-oc-soon {
    margin-left: auto;
    padding: 2px 7px;
    border: 1px solid var(--sheep-accent-line);
    border-radius: 999px;
    color: var(--sheep-accent-ink);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

[data-theme="dark"] .sheep-offcanvas {
    --oc-active: rgba(var(--sheep-accent-rgb), 0.16);
    --oc-active-text: var(--sheep-accent-ink);
    --oc-art: #282f3e;
    --oc-count: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sheep-offcanvas .sheep-oc-cat.active .sheep-oc-cat-art {
    background: #333c4d;
}

/* ---- top bar menus (language, account) and the bottom bar's language list (Benji, 2026-10-12) ----
   The model's white panel: no frame, soft shadow, 14 px corners, rounded rows; the chosen row pale
   orange with dark orange text (no more green block). The "FR" button stays plain text: no
   outline, a light grey patch while hovered or open. */
.sheep-topbar .dropdown-menu:not(.notification-dropdown),
.sheep-bb-langs {
    --bs-dropdown-padding-x: 6px;
    --bs-dropdown-padding-y: 6px;
    --bs-dropdown-item-padding-x: 12px;
    --bs-dropdown-item-padding-y: 9px;
    --bs-dropdown-link-color: #202124;
    --bs-dropdown-link-hover-color: #202124;
    --bs-dropdown-link-hover-bg: #f5f6f7;
    --bs-dropdown-link-active-color: var(--sheep-accent-ink);
    --bs-dropdown-link-active-bg: var(--sheep-accent-soft);
    --bs-dropdown-divider-bg: #e9ebee;
    --bs-dropdown-header-color: #686b72;
    min-width: 11rem;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(32, 33, 36, 0.14), 0 2px 6px rgba(32, 33, 36, 0.06);
    font-size: 0.85rem;
}

    .sheep-topbar .dropdown-menu .dropdown-item,
    .sheep-bb-langs .dropdown-item {
        display: flex;
        align-items: center;
        gap: 6px;
        border-radius: 10px;
        font-weight: 550;
    }

        .sheep-topbar .dropdown-menu .dropdown-item.active,
        .sheep-bb-langs .dropdown-item.active {
            font-weight: 700;
        }

    .sheep-topbar .dropdown-menu .sheep-lang-code,
    .sheep-bb-langs .sheep-lang-code {
        width: 2.4em;
        color: #686b72;
        opacity: 1;
    }

    .sheep-topbar .dropdown-menu .dropdown-item.active .sheep-lang-code,
    .sheep-bb-langs .dropdown-item.active .sheep-lang-code {
        color: var(--sheep-accent-ink);
    }

[data-theme="dark"] .sheep-topbar .dropdown-menu:not(.notification-dropdown),
[data-theme="dark"] .sheep-bb-langs {
    --bs-dropdown-bg: #1b2742;
    --bs-dropdown-link-color: #e9ebee;
    --bs-dropdown-link-hover-color: #e9ebee;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-dropdown-link-active-color: var(--sheep-accent-ink);
    --bs-dropdown-link-active-bg: rgba(var(--sheep-accent-rgb), 0.16);
    --bs-dropdown-divider-bg: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.sheep-topbar .sheep-lang-pill {
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    outline: 0;
    box-shadow: none;
    color: #3c4043;
}

    .sheep-topbar .sheep-lang-pill:hover,
    .sheep-topbar .sheep-lang-pill.show {
        background: #f5f6f7;
        color: #202124;
    }

    .sheep-topbar .sheep-lang-pill:focus-visible {
        outline: 2px solid var(--sheep-accent-line);
        outline-offset: 1px;
    }

    .sheep-topbar .sheep-lang-pill.show .sheep-lang-caret {
        transform: rotate(180deg);
    }

.sheep-lang-caret {
    transition: transform .15s ease;
}

[data-theme="dark"] .sheep-topbar .sheep-lang-pill:hover,
[data-theme="dark"] .sheep-topbar .sheep-lang-pill.show {
    background: rgba(255, 255, 255, 0.07);
    color: #e9ebee;
}

/* ---- orange on hover: the gradient too ---- */
.sheep-basket-pill:hover,
.sheep-basket-pill:focus-visible {
    background: var(--sheep-grad);
    color: #fff;
}

/* ---- signed in: delivery / pickup as one button in the top bar (Benji, 2026-10-12) ----
   Where visitors see "Connexion". It shows the current mode (pale orange for delivery, pale green
   for pickup) and a tap anywhere on it switches to the other one. Phones and tablets only: the
   desktop bar keeps the two-part pill. To make room, the language leaves the bar for the bottom
   bar and the menu, and the account button loses its little caret. */
.sheep-mode-switch {
    display: none;
}

@media (max-width: 991.98px) {
    .sheep-mode-switch-top {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 36px;
        padding: 0 10px 0 11px;
        border-radius: 11px;
        background: var(--sheep-accent-soft);
        box-shadow: inset 0 0 0 1px var(--sheep-accent-line);
        color: var(--sheep-accent-ink);
        font-size: 0.78rem;
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .1s ease;
    }

        .sheep-mode-switch-top:hover,
        .sheep-mode-switch-top:focus-visible {
            color: var(--sheep-accent-ink);
        }

        .sheep-mode-switch-top:active {
            transform: scale(0.96);
        }

        .sheep-mode-switch-top.is-pickup,
        .sheep-mode-switch-top.is-pickup:hover {
            background: var(--sheep-green-soft);
            box-shadow: inset 0 0 0 1px rgba(6, 129, 37, 0.25);
            color: var(--sheep-green);
        }

    .sheep-mode-switch-face {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        animation: sheep-mode-swap .22s ease;
    }

        .sheep-mode-switch-face .bi {
            font-size: 1rem;
        }

    .sheep-mode-switch-swap {
        font-size: 0.72rem;
        opacity: 0.75;
    }

    .sheep-topbar:has(.sheep-mode-switch-top) .dropdown:has(> .sheep-lang-pill) {
        display: none;
    }

    .sheep-user-dropdown .dropdown-toggle::after {
        display: none;
    }

    .sheep-user-dropdown .sheep-topbar-user > .bi {
        margin-right: 0 !important;
    }
}

/* Narrow phones, or a basket in the bar: the switch keeps its icon and arrows only. */
@media (max-width: 379.98px) {
    .sheep-mode-switch-label {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .sheep-topbar:has(.sheep-basket-pill) .sheep-mode-switch-label {
        display: none;
    }
}

@keyframes sheep-mode-swap {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}

[data-theme="dark"] .sheep-mode-switch-top.is-pickup {
    background: rgba(134, 212, 143, 0.14);
    color: #86d48f;
}

/* Up to 420 px: the switch drops its arrows to keep "À emporter" in one line next to the bell and
   the account; with no label (narrow phones, basket in the bar) the arrows come back. */
@media (max-width: 419.98px) {
    .sheep-mode-switch-top {
        padding: 0 10px;
    }

    .sheep-mode-switch-swap {
        display: none;
    }
}

@media (max-width: 379.98px) {
    .sheep-mode-switch-swap {
        display: inline;
    }
}

@media (max-width: 575.98px) {
    .sheep-topbar:has(.sheep-basket-pill) .sheep-mode-switch-swap {
        display: inline;
    }
}

/* ---- desktop sidebar, back on the left (Benji, 2026-10-12) ----
   The same look and content as the side menu (the model's category bar): 44 px rows with small
   labels, the current page pale orange with dark orange text and an orange edge, then each
   universe folding open on its categories with their pictures. */
.sheep-sidebar {
    --oc-text: #202124;
    --oc-muted: #686b72;
    --oc-line: #e2e8f0;
    --oc-hover: #f5f6f7;
    --oc-active: var(--sheep-accent-soft);
    --oc-active-text: var(--sheep-accent-ink);
    --oc-mark: var(--sheep-accent);
    --oc-art: #f5f6f7;
    --oc-count: #f0f3ea;
}

    .sheep-sidebar .sheep-side-heading {
        padding: 12px 22px 8px;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }

    .sheep-sidebar .nav-link,
    .sheep-sidebar .sheep-oc-link {
        gap: 11px;
        min-height: 44px;
        padding: 7px 10px;
        border-radius: 12px;
        color: var(--oc-text);
        font-size: 0.8rem;
        font-weight: 550;
    }

    .sheep-sidebar .nav-link {
        margin: 1px 12px;
    }

        .sheep-sidebar .nav-link:hover,
        .sheep-sidebar .sheep-oc-link:hover,
        .sheep-sidebar .sheep-oc-link:focus-visible {
            background: var(--oc-hover);
            color: var(--oc-text) !important;
        }

        .sheep-sidebar .nav-link.active,
        .sheep-sidebar .nav-link[aria-current="page"],
        .sheep-sidebar .sheep-oc-link.active {
            background: var(--oc-active);
            color: var(--oc-active-text) !important;
            font-weight: 750;
            box-shadow: inset 3px 0 0 var(--oc-mark);
        }

            .sheep-sidebar .nav-link.active::before,
            .sheep-sidebar .nav-link[aria-current="page"]::before {
                display: none;
            }

.sheep-sidebar .sheep-side-cats {
    padding: 4px 12px 0;
    list-style: none;
}

.sheep-sidebar .sheep-oc-cats {
    margin: 4px 0 6px;
}

.sheep-sidebar .sheep-oc-section {
    min-height: 39px;
    padding-right: 10px;
    color: var(--oc-muted);
}

    .sheep-sidebar .sheep-oc-section .sheep-oc-heading {
        padding: 8px 10px 9px;
        font-size: 0.68rem;
        font-weight: 750;
        letter-spacing: 0.07em;
        color: var(--oc-muted);
        opacity: 1;
    }

.sheep-sidebar .sheep-oc-count {
    min-width: 0;
    height: auto;
    padding: 3px 6px;
    border-radius: 8px;
    background: var(--oc-count);
    color: var(--oc-muted);
    font-size: 0.56rem;
    font-weight: 500;
    line-height: 1.5;
}

.sheep-sidebar .sheep-oc-chevron {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
}

.sheep-sidebar .sheep-oc-cat {
    min-height: 56px;
    font-size: 0.75rem;
}

    .sheep-sidebar .sheep-oc-cat.active .sheep-oc-cat-art {
        background: #fff;
    }

.sheep-sidebar .sheep-oc-link .nav-cat-ico {
    width: 22px;
    flex: 0 0 22px;
}

    .sheep-sidebar .sheep-oc-link .nav-cat-ico .hf-ico {
        display: block;
        width: 22px;
        height: 22px;
    }

[data-theme="dark"] .sheep-sidebar {
    --oc-text: #e9ebee;
    --oc-muted: #9ca8ba;
    --oc-line: rgba(255, 255, 255, 0.09);
    --oc-hover: rgba(255, 255, 255, 0.05);
    --oc-active: rgba(var(--sheep-accent-rgb), 0.16);
    --oc-active-text: var(--sheep-accent-ink);
    --oc-art: #282f3e;
    --oc-count: rgba(255, 255, 255, 0.08);
}

/* Desktop: no bottom bar under the footer, so no room kept for it. */
@media (min-width: 992px) {
    .main-content .sheep-public-footer .sheep-public-footer-inner {
        padding-bottom: 28px;
    }
}

/* ---- desktop top bar, once signed in or with an address (Benji's captures, 2026-10-12) ----
   Logo (above the sidebar), then the address in bold with "Autour de vous" / "À emporter autour de
   vous" under it, delivery / pickup with the chosen side in solid orange, a wide search field
   (it opens the search window), then the language, day / night, the bell, the account and the
   basket as round pale orange buttons. */
:root {
    --sheep-display: "Fredoka", "Baloo 2", "Nunito", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.sheep-topsearch-hint,
.sheep-topsearch-filter,
.sheep-topbar-basket,
.sheep-addr-for-pickup {
    display: none;
}

.sheep-topbar:has(.sheep-mode-btn.active[data-mode="pickup"]) .sheep-addr-for-delivery {
    display: none;
}

.sheep-topbar:has(.sheep-mode-btn.active[data-mode="pickup"]) .sheep-addr-for-pickup {
    display: block;
}

@media (min-width: 992px) {
    .sheep-topbar-center {
        justify-content: flex-start;
        gap: 12px;
    }

        .sheep-topbar-center .sheep-addr-btn {
            order: 1;
        }

        .sheep-topbar-center .sheep-mode-top {
            order: 2;
        }

        .sheep-topbar-center .sheep-topsearch {
            order: 3;
            flex: 1 1 auto;
            min-width: 0;
        }

    /* The address: bold first, the mode's words under it, an orange pin. As tall as the bar's
       other controls (Benji, 2026-10-13: it stood 2 px taller). */
    .sheep-addr-btn {
        height: var(--tb-ico, 42px);
        max-width: 230px;
        gap: 9px;
    }

        .sheep-addr-btn > .bi-geo-alt {
            color: var(--sheep-accent-dark);
            font-size: 1.15rem;
        }

    .sheep-addr-text strong {
        font-size: 0.86rem;
        font-weight: 750;
        color: var(--bar-text);
    }

    .sheep-addr-text small {
        font-size: 0.68rem;
        color: var(--bar-muted);
    }

    /* Delivery / pickup: a grey pill, the chosen side solid orange with white words. The pill is
       exactly as tall as the bar's circles (Benji, 2026-10-13: it stood 4 px taller). */
    .sheep-topbar .sheep-mode-top {
        box-sizing: border-box;
        height: var(--tb-ico, 42px);
        padding: 3px;
        border-radius: 999px;
        background: var(--sheep-soft);
    }

        .sheep-topbar .sheep-mode-top .sheep-mode-btn {
            align-items: center;
            gap: 7px;
            height: 100%;
            min-height: 0;
            padding: 0 16px;
            border-radius: 999px;
            color: var(--bar-text);
            font-size: 0.8rem;
            font-weight: 700;
            box-shadow: none;
        }

            .sheep-topbar .sheep-mode-top .sheep-mode-btn .bi {
                font-size: 1rem;
            }

            .sheep-topbar .sheep-mode-top .sheep-mode-btn.active {
                background: var(--sheep-grad);
                color: #fff;
                box-shadow: 0 4px 12px rgba(var(--sheep-accent-dark-rgb), 0.28);
            }

    /* The search: a wide rounded field with its hint and the filters icon. */
    .sheep-topbar .sheep-topsearch-toggle {
        width: 100%;
        height: 44px;
        justify-content: flex-start;
        gap: 10px;
        padding: 0 16px 0 16px;
        border: 1px solid var(--bar-border);
        border-radius: 999px;
        background: var(--bar-bg);
        color: var(--bar-muted);
    }

        .sheep-topbar .sheep-topsearch-toggle:hover,
        .sheep-topbar .sheep-topsearch-toggle:focus-visible {
            border-color: #dadce0;
            background: var(--bar-bg);
        }

        .sheep-topbar .sheep-topsearch-toggle .sheep-search-svg {
            color: var(--bar-text);
        }

    .sheep-topsearch-hint {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.82rem;
    }

    .sheep-topsearch-filter {
        display: block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        fill: none;
        stroke: var(--bar-text);
        stroke-width: 1.75;
        stroke-linecap: round;
    }

    /* Right: language, day / night, bell, account, basket. */
    .sheep-topbar .dropdown:has(> .sheep-lang-pill) {
        order: 1;
    }

    .sheep-topbar .sheep-topbar-theme {
        order: 2;
        width: 40px;
        height: 40px;
        color: var(--bar-text);
    }

    .sheep-topbar .dropdown:has(> .notification-bell) {
        order: 3;
    }

    .sheep-topbar .notification-bell {
        width: 40px;
        height: 40px;
        border: 0;
        background: transparent;
        color: var(--bar-text);
    }

        .sheep-topbar .notification-bell:hover {
            background: var(--bar-hover-bg);
        }

    .sheep-topbar .sheep-user-dropdown,
    .sheep-topbar .sheep-topbar-signin {
        order: 4;
    }

    .sheep-topbar .sheep-basket-pill,
    .sheep-topbar .sheep-topbar-basket,
    .sheep-topbar .ms-auto > a.sheep-topbar-user {
        order: 5;
    }

    .sheep-user-dropdown .sheep-topbar-user {
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--sheep-accent-soft);
        color: var(--bar-text);
    }

        .sheep-user-dropdown .sheep-topbar-user:hover,
        .sheep-user-dropdown .sheep-topbar-user.show {
            background: var(--sheep-accent-pale);
            color: var(--bar-text);
        }

        .sheep-user-dropdown .sheep-topbar-user > .bi {
            margin-right: 0 !important;
            font-size: 1.2rem !important;
        }

        .sheep-user-dropdown .sheep-topbar-user > span,
        .sheep-user-dropdown .sheep-topbar-user.dropdown-toggle::after {
            display: none !important;
        }

    .sheep-topbar-basket {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--sheep-accent-soft);
        color: var(--sheep-accent-dark);
        font-size: 1.15rem;
        text-decoration: none;
    }

        .sheep-topbar-basket:hover {
            background: var(--sheep-accent-pale);
            color: var(--sheep-accent-ink);
        }

    .sheep-topbar:has(.sheep-basket-pill) .sheep-topbar-basket,
    .sheep-topbar:has(.bi-bag-check) .sheep-topbar-basket {
        display: none;
    }
}

[data-theme="dark"] .sheep-user-dropdown .sheep-topbar-user,
[data-theme="dark"] .sheep-topbar-basket {
    background: rgba(var(--sheep-accent-rgb), 0.16);
}

/* Narrow desktops (992 to 1199 px): no room for the wide field, the search stays a round magnifier. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sheep-topbar-center .sheep-topsearch {
        flex: 0 0 auto;
    }

    .sheep-topbar .sheep-topsearch-toggle {
        width: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .sheep-topsearch-hint,
    .sheep-topsearch-filter {
        display: none;
    }
}

/* The brand green as a background (used by a dozen headers, never defined until now: their white
   text sat on white). */
.bg-sheep-green {
    background-color: var(--sheep-green) !important;
}

/* ---- the end of the customer pages: merchants, deliverers, the app (Benji, 2026-10-12) ----
   The short version of the bottom of "Pourquoi Sheep-Me", kept light: three cards side by side,
   a small illustration, small grey capitals, a title, one line and a dark orange link; the app's
   card on light grey with its two store buttons. The columns follow the band's own width, so the
   cards keep their proportions whatever the page: three side by side from 940 px, then two with the
   app across, then one under the other below 540 px. */
.sheep-join {
    container: sheep-join / inline-size;
    width: 100%;
    margin: 48px auto 0;
    padding: 0 16px;
}

/* As wide as the page: the full content width (its side padding, like the content above), or the
   width of the page itself when it is narrower than the screen, centred like it. */
@media (min-width: 768px) {
    .sheep-join {
        padding: 0 24px;
    }
}

main:has(.sheep-public-page) .sheep-join {
    max-width: calc(980px + 48px);
}

main:has(.support-page) .sheep-join {
    max-width: calc(1180px + 48px);
}

/* The entry page keeps its own narrower side padding (16 px, 10 px on phones). */
main:has(.ld-entry) .sheep-join {
    max-width: calc(1240px + 32px);
    padding: 0 16px;
}

@media (max-width: 767.98px) {
    main:has(.ld-entry) .sheep-join {
        padding: 0 10px;
    }
}

.sheep-join-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sheep-join-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--sheep-line);
    border-radius: 19px;
    background: var(--surface-bg, #fff);
    color: var(--sheep-dark);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    a.sheep-join-card:hover,
    a.sheep-join-card:focus-visible {
        border-color: #dadce0;
        box-shadow: 0 8px 24px rgba(32, 33, 36, 0.06);
        color: var(--sheep-dark);
        transform: translateY(-1px);
    }

        a.sheep-join-card:hover .sheep-join-link {
            color: var(--sheep-accent);
        }

.sheep-join-art {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    object-fit: contain;
}

    /* The deliverers' picture (Benji, 2026-10-13) is wide, on its own dark ground: a rounded tile. */
    .sheep-join-art.sheep-join-art-wide {
        width: 96px;
        height: 64px;
        flex-basis: 96px;
        object-fit: cover;
        border-radius: 14px;
    }

.sheep-join-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sheep-join-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sheep-gray);
}

.sheep-join-title {
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--sheep-dark);
}

.sheep-join-text {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--sheep-gray);
}

.sheep-join-link {
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--sheep-accent-ink);
    transition: color .15s ease;
}

.sheep-join-app {
    border-color: transparent;
    background: var(--sheep-soft);
}

.sheep-join-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.sheep-join-store {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px 0 10px;
    border-radius: 10px;
    background: #202124;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.05;
    text-decoration: none;
}

    .sheep-join-store:hover,
    .sheep-join-store:focus-visible {
        background: #000;
        color: #fff;
    }

    .sheep-join-store i {
        font-size: 1.15rem;
    }

    .sheep-join-store span {
        display: flex;
        flex-direction: column;
    }

    .sheep-join-store small {
        font-size: 0.55rem;
        font-weight: 500;
        opacity: 0.8;
    }

@container sheep-join (max-width: 939.98px) {
    .sheep-join-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sheep-join-app {
        grid-column: 1 / -1;
    }

        .sheep-join-app .sheep-join-body {
            flex: 1 1 auto;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            column-gap: 24px;
        }

        .sheep-join-app .sheep-join-kicker {
            flex-basis: 100%;
        }

        .sheep-join-app .sheep-join-stores {
            margin: 0 0 0 auto;
        }
}

@media (max-width: 575.98px) {
    .sheep-join {
        margin-top: 32px;
    }
}

@container sheep-join (max-width: 539.98px) {
    .sheep-join-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sheep-join-card {
        padding: 16px;
    }

    .sheep-join-art {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

        .sheep-join-art.sheep-join-art-wide {
            width: 84px;
            height: 56px;
            flex-basis: 84px;
        }
}

[data-theme="dark"] .sheep-join-card {
    border-color: rgba(148, 163, 184, 0.18);
    background: #1b2742;
}

[data-theme="dark"] .sheep-join-app {
    border-color: transparent;
    background: #282f3e;
}

[data-theme="dark"] .sheep-join-store {
    background: #000;
}

@container sheep-join (max-width: 539.98px) {
    .sheep-join-app .sheep-join-stores {
        margin: 8px 0 0;
    }
}

/* ---- the entry page for a visitor with neither an address nor an account (Benji, 2026-10-12) ----
   No menus, as on the model: no sidebar on desktop, no bottom bar on phones; the top bar keeps the
   logo, the language and the sign-in. The footer drops the room it kept for the bottom bar. */
body:has(.ld-simple.ld-no-address.ld-guest) .sheep-sidebar,
body:has(.ld-simple.ld-no-address.ld-guest) .sheep-bottom-nav,
body:has(.ld-simple.ld-no-address.ld-guest) .sheep-quick-backdrop,
body:has(.ld-simple.ld-no-address.ld-guest) .sheep-topbar-center {
    display: none !important;
}

@media (min-width: 992px) {
    body:has(.ld-simple.ld-no-address.ld-guest) .main-content {
        padding-left: 0 !important;
    }
}

body:has(.ld-simple.ld-no-address.ld-guest) .main-content .sheep-public-footer .sheep-public-footer-inner {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

/* The sign-in page, same idea (Benji, 2026-10-12): no sidebar on desktop, no bottom bar on phones;
   the top bar stays as it is. */
body:has(.acc-login) .sheep-sidebar,
body:has(.acc-login) .sheep-bottom-nav,
body:has(.acc-login) .sheep-quick-backdrop {
    display: none !important;
}

@media (min-width: 992px) {
    body:has(.acc-login) .main-content {
        padding-left: 0 !important;
    }
}

body:has(.acc-login) .main-content .sheep-public-footer .sheep-public-footer-inner {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

/* On these two pages without a sidebar (Benji, 2026-10-12), the top bar spans the page under it,
   its 1240 px column, instead of running to the screen edges: the logo lines up with the content's
   left edge and the buttons with its right edge. The entry page sits 16 px from the sides, the
   sign-in page 40 px (the page padding, then its own). */
@media (min-width: 768px) {
    body:has(.ld-simple.ld-no-address.ld-guest) .sheep-topbar > .container-fluid {
        max-width: calc(1240px + 32px);
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body:has(.acc-login) .sheep-topbar > .container-fluid {
        max-width: calc(1240px + 80px);
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* ---- "Se connecter" as a round icon when the bar runs short (Benji, 2026-10-12) ----
   On desktop between 992 and 1199 px (the address, delivery / pickup and the search take the
   room) and on the narrowest phones, the words would push the buttons onto each other: the button
   keeps only its person icon, in the same orange circle; its name stays as tooltip and for
   screen readers. */
@media (min-width: 992px) and (max-width: 1199.98px), (max-width: 479.98px) {
    .sheep-topbar .sheep-topbar-signin {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        padding: 0 !important;
    }

        .sheep-topbar .sheep-topbar-signin .sheep-signin-long,
        .sheep-topbar .sheep-topbar-signin .sheep-signin-short {
            display: none;
        }

        .sheep-topbar .sheep-topbar-signin .bi {
            display: inline-block;
            margin: 0 !important;
            font-size: 1.15rem;
            line-height: 1;
        }
}

/* Small desktops (992 to 1079 px): the address gives up a little width (its text ends in "...") and
   the bar's items sit a bit closer, so the search no longer runs into the language button. */
@media (min-width: 992px) and (max-width: 1079.98px) {
    .sheep-topbar-center {
        gap: 8px;
    }

        .sheep-topbar-center .sheep-addr-btn {
            max-width: 168px;
            flex-shrink: 1;
        }

    .sheep-addr-text small {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---- the address in the top bar on phones and tablets too (Benji, 2026-10-12) ----
   Knowing where the shops are counted from matters, so below 992 px the address stays in the bar,
   right of the logo ("pin Lausanne v"), small, and shortened with "..." when the bar runs short; a
   tap opens the address window as on desktop. Below 768 px the logo is Benji's small one (the sheep
   alone) to leave it room. The bar is 56 px tall, as the page below already expects. */
.sheep-brand-mobile {
    display: none;
}

@media (max-width: 991.98px) and (min-height: 521px) {
    .sheep-topbar {
        padding-top: 4px;
        padding-bottom: 4px;
    }

        .sheep-topbar > .container-fluid {
            min-height: 48px;
        }

        .sheep-topbar .sheep-addr-btn {
            display: inline-flex;
            flex: 0 1 auto;
            align-items: center;
            gap: 4px;
            min-width: 0;
            max-width: 200px;
            height: 36px;
            padding: 0 6px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: var(--bar-text);
            font-size: 0.8rem;
            line-height: 1;
            text-decoration: none;
        }

            .sheep-topbar .sheep-addr-btn:hover,
            .sheep-topbar .sheep-addr-btn:focus-visible {
                background: var(--bar-hover-bg);
            }

            .sheep-topbar .sheep-addr-btn > .bi-geo-alt {
                flex: 0 0 auto;
                font-size: 0.95rem;
                color: var(--sheep-accent-dark, #068125);
            }

            .sheep-topbar .sheep-addr-btn .sheep-addr-text small {
                display: none;
            }

            .sheep-topbar .sheep-addr-btn .sheep-addr-text strong {
                font-size: 0.8rem;
                font-weight: 700;
            }

            .sheep-topbar .sheep-addr-btn .sheep-addr-caret {
                flex: 0 0 auto;
                font-size: 0.6rem;
            }

        /* The search icon joins the buttons on the right; the address follows the logo. */
        .sheep-topbar .sheep-topsearch {
            margin-left: auto;
            margin-right: 4px;
        }

        .sheep-topbar > .container-fluid > .ms-auto {
            margin-left: 0 !important;
        }

        /* The search opens over the bar: the address steps aside with the logo. */
        .sheep-topbar:has(.sheep-topsearch.is-open) .sheep-addr-btn {
            visibility: hidden;
        }
}

/* Phones and tablets (Benji, 2026-10-13: tablets too): the sheep alone instead of the full logo. */
@media (max-width: 991.98px) and (min-height: 521px) {
    .sheep-topbar .sheep-topbar-brand {
        margin-right: 0;
    }

        .sheep-topbar .sheep-topbar-brand .sheep-brand-light,
        .sheep-topbar .sheep-topbar-brand .sheep-brand-dark {
            display: none !important;
        }

        .sheep-topbar .sheep-topbar-brand .sheep-brand-mobile {
            display: block;
            width: auto;
            height: 32px;
        }

        .sheep-topbar .sheep-addr-btn {
            gap: 3px;
            padding: 0 3px;
        }
}

/* A phone on its side: plenty of width, a thin bar; the address simply sits after the logo. */
@media (max-width: 991.98px) and (max-height: 520px) {
    .sheep-topbar .sheep-addr-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        max-width: 180px;
        padding: 0 6px;
        border: 0;
        background: transparent;
        color: var(--bar-text);
        font-size: 0.78rem;
        text-decoration: none;
    }

        .sheep-topbar .sheep-addr-btn > .bi-geo-alt {
            color: var(--sheep-accent-dark, #068125);
        }

        .sheep-topbar .sheep-addr-btn .sheep-addr-text small {
            display: none;
        }
}

/* ---- delivery / pickup kept in the top bar as long as it fits (Benji, 2026-10-12) ----
   For visitors (signed-in customers have their one-tap switch on the right): below 992 px the pair
   stays in the bar, the chosen mode with its name and the other as its icon, then both as icons on
   small phones; only the narrowest phones hand it over to the list's own switch. Where the bar has
   it, the list's switch goes. */
@media (min-width: 360px) and (max-width: 991.98px) and (min-height: 521px) {
    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top {
        display: inline-flex !important;
        flex: 0 0 auto;
        box-sizing: border-box;
        height: var(--tb-ico, 36px); /* as tall as the bar's circles (Benji, 2026-10-13) */
        margin-left: 4px; /* right after the address (Benji, 2026-10-12) */
        padding: 3px;
        border-radius: 999px;
        background: var(--sheep-soft);
    }

        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn {
            align-items: center;
            gap: 6px;
            height: 100%;
            min-height: 0;
            padding: 0 12px;
            font-size: 0.78rem;
            border-radius: 999px;
            color: var(--bar-text);
            font-weight: 700;
            box-shadow: none;
        }

            /* As on desktop: a grey pill, the chosen mode in the orange gradient. */
            .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active {
                background: var(--sheep-grad);
                color: #fff;
                box-shadow: 0 4px 12px rgba(var(--sheep-accent-dark-rgb), 0.28);
            }

            .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active .bi,
            .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn:not(.active) span {
                display: none;
            }

            .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn:not(.active) {
                padding: 6px 10px;
            }

    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-topsearch {
        margin-left: auto;
    }

    body:not(:has(.sheep-mode-switch-top)) .hf-host-modebar .hf-top {
        display: none;
    }
}

/* Small phones: both modes as icons, the chosen one in orange (names in the tooltips). */
@media (min-width: 360px) and (max-width: 480.98px) and (min-height: 521px) {
    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active .bi {
        display: inline-block;
    }

    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active span {
        display: none;
    }

    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn {
        padding: 6px 8px;
    }
}

/* ---- bottom bar with fewer buttons (Benji, 2026-10-12) ----
   Row 1: Menu, the round button, Panier. Row 2, slid up by the round button, is now a single row
   of four (Explorer, Mes commandes, Jour-nuit, Langue): the bar waits 1 px (separator) + 62 px
   (one 50 px row and 6 px above and below) below the screen, 1 + 52 px on a phone on its side. */
.sheep-bottom-nav {
    transform: translateY(63px);
}

.sheep-bottom-row.sheep-bottom-quick {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-height: 520px) and (orientation: landscape) {
    .sheep-bottom-nav {
        transform: translateY(53px);
    }
}

/* ---- the smallest phones (Benji, 2026-10-12) ----
   On phones (below 576 px) the top bar's magnifier goes: the bottom bar's Recherche opens the same
   search window. Below 480 px "Connexion" keeps only its icon (rule above), and delivery / pickup
   stays in the bar as two icons down to 360 px, so the address beside the logo stays readable. */
@media (max-width: 575.98px) and (min-height: 521px) {
    .sheep-topbar .sheep-topsearch {
        display: none;
    }

    /* Without the magnifier, the buttons on the right take the free space before them. */
    .sheep-topbar > .container-fluid > .ms-auto {
        margin-left: auto !important;
    }
}

/* ---- the current page in green (Benji, 2026-10-12) ----
   In the sidebar, the phone's side menu and the bottom bar, the active button turns to the brand
   green instead of the orange: a pale green ground, dark green text and icon, a green edge in the
   menus. The dark theme uses the lighter greens that read on it. */
.sheep-sidebar,
.sheep-offcanvas {
    --oc-active: var(--sheep-accent-soft);
    --oc-active-text: var(--sheep-accent-dark);
    --oc-mark: var(--sheep-accent-dark);
}

[data-theme="dark"] .sheep-sidebar,
[data-theme="dark"] .sheep-offcanvas {
    --oc-active: rgba(var(--sheep-accent-light-rgb), 0.14);
    --oc-active-text: var(--sheep-accent-light);
    --oc-mark: var(--sheep-accent);
}

.sheep-bb.active,
.sheep-bb.active:hover {
    background: var(--sheep-accent-soft);
    color: var(--sheep-accent-dark);
}

[data-theme="dark"] .sheep-bb.active,
[data-theme="dark"] .sheep-bb.active:hover {
    background: rgba(var(--sheep-accent-light-rgb), 0.14);
    color: var(--sheep-accent-light);
}

/* ---- bottom bar buttons gathered in the middle (Benji, 2026-10-12) ----
   Instead of running to the screen's edges, the five buttons of row 1 and the four of row 2 sit
   together in the middle, 20 px apart. */
.sheep-bottom-row.sheep-bottom-main {
    justify-content: center;
    gap: 20px;
}

.sheep-bottom-row.sheep-bottom-quick {
    grid-template-columns: repeat(4, var(--sheep-bb-size));
    justify-content: center;
    column-gap: 20px;
}

/* ---- left menus with some life (Benji, 2026-10-12) ----
   The menus get the contrast the orange buttons have, in green. The current page is a green
   gradient button with white words and a soft shadow, its icon popping in. On hover (mouse only) a
   pale green band slides in from the left, the row leans a little to the right and its icon bounces
   with a tilt (the category pictures only grow, without turning); a press sinks it a touch. Desktop
   sidebar and phone menu alike; still for visitors who asked their device for less motion. */
.sheep-sidebar .nav-link,
.sheep-sidebar .sheep-oc-link,
.sheep-offcanvas .sheep-oc-link {
    position: relative;
    isolation: isolate;
    transition: color .2s ease, background-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

    .sheep-sidebar .nav-link::after,
    .sheep-sidebar .sheep-oc-link::after,
    .sheep-offcanvas .sheep-oc-link::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(var(--sheep-accent-dark-rgb), 0.15) 0%, rgba(var(--sheep-accent-dark-rgb), 0.04) 100%);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .32s cubic-bezier(.22, 1, .36, 1);
        pointer-events: none;
    }

    .sheep-sidebar .nav-link .sheep-oc-svg,
    .sheep-sidebar .sheep-oc-link .sheep-oc-svg,
    .sheep-sidebar .sheep-oc-link .sheep-oc-cat-art,
    .sheep-sidebar .sheep-oc-link .nav-cat-ico,
    .sheep-offcanvas .sheep-oc-link .sheep-oc-svg,
    .sheep-offcanvas .sheep-oc-link .sheep-oc-cat-art,
    .sheep-offcanvas .sheep-oc-link .nav-cat-ico {
        transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
    }

@media (hover: hover) {
    .sheep-sidebar .nav-link:hover,
    .sheep-sidebar .sheep-oc-link:hover,
    .sheep-offcanvas .sheep-oc-link:hover {
        background: transparent;
        transform: translateX(3px);
    }

        .sheep-sidebar .nav-link:hover::after,
        .sheep-sidebar .sheep-oc-link:hover::after,
        .sheep-offcanvas .sheep-oc-link:hover::after {
            transform: scaleX(1);
        }

        .sheep-sidebar .nav-link:hover .sheep-oc-svg,
        .sheep-sidebar .sheep-oc-link:hover .sheep-oc-svg,
        .sheep-sidebar .sheep-oc-link:hover .nav-cat-ico,
        .sheep-offcanvas .sheep-oc-link:hover .sheep-oc-svg,
        .sheep-offcanvas .sheep-oc-link:hover .nav-cat-ico {
            transform: scale(1.14) rotate(-7deg);
        }

        /* The category pictures grow, without turning. */
        .sheep-sidebar .sheep-oc-link:hover .sheep-oc-cat-art,
        .sheep-offcanvas .sheep-oc-link:hover .sheep-oc-cat-art {
            transform: scale(1.14);
        }
}

.sheep-sidebar .nav-link:active,
.sheep-sidebar .sheep-oc-link:active,
.sheep-offcanvas .sheep-oc-link:active {
    transform: scale(0.97);
}

/* The current page: a gradient button in the site's colour (green, or the orange a reader chose),
   white words and icon, a soft shadow of the same colour. */
.sheep-sidebar .nav-link.active,
.sheep-sidebar .nav-link[aria-current="page"],
.sheep-sidebar .sheep-oc-link.active,
.sheep-offcanvas .sheep-oc-link.active {
    background: var(--sheep-grad) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(var(--sheep-accent-dark-rgb), 0.28) !important;
    font-weight: 750;
}

    .sheep-sidebar .nav-link.active::after,
    .sheep-sidebar .nav-link[aria-current="page"]::after,
    .sheep-sidebar .sheep-oc-link.active::after,
    .sheep-offcanvas .sheep-oc-link.active::after {
        display: none;
    }

    .sheep-sidebar .nav-link.active .sheep-oc-svg,
    .sheep-sidebar .sheep-oc-link.active .sheep-oc-svg,
    .sheep-sidebar .sheep-oc-link.active .nav-cat-ico,
    .sheep-offcanvas .sheep-oc-link.active .sheep-oc-svg,
    .sheep-offcanvas .sheep-oc-link.active .nav-cat-ico {
        color: #fff;
        animation: sheep-menu-pop .55s cubic-bezier(.34, 1.56, .64, 1) backwards;
    }

    /* The category picture pops in without turning. */
    .sheep-sidebar .sheep-oc-link.active .sheep-oc-cat-art,
    .sheep-offcanvas .sheep-oc-link.active .sheep-oc-cat-art {
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        animation: sheep-menu-pop-straight .55s cubic-bezier(.34, 1.56, .64, 1) backwards;
    }

[data-theme="dark"] .sheep-sidebar .nav-link.active,
[data-theme="dark"] .sheep-sidebar .sheep-oc-link.active,
[data-theme="dark"] .sheep-offcanvas .sheep-oc-link.active {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .sheep-sidebar .nav-link::after,
[data-theme="dark"] .sheep-sidebar .sheep-oc-link::after,
[data-theme="dark"] .sheep-offcanvas .sheep-oc-link::after {
    background: linear-gradient(90deg, rgba(var(--sheep-accent-light-rgb), 0.18) 0%, rgba(var(--sheep-accent-light-rgb), 0.05) 100%);
}

@keyframes sheep-menu-pop {
    0% {
        transform: scale(0.6) rotate(-12deg);
    }

    60% {
        transform: scale(1.15) rotate(4deg);
    }

    100% {
        transform: none;
    }
}

@keyframes sheep-menu-pop-straight {
    0% {
        transform: scale(0.6);
    }

    60% {
        transform: scale(1.15);
    }

    100% {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sheep-sidebar .nav-link,
    .sheep-sidebar .sheep-oc-link,
    .sheep-offcanvas .sheep-oc-link,
    .sheep-sidebar .nav-link::after,
    .sheep-sidebar .sheep-oc-link::after,
    .sheep-offcanvas .sheep-oc-link::after,
    .sheep-sidebar .sheep-oc-svg,
    .sheep-sidebar .sheep-oc-cat-art,
    .sheep-offcanvas .sheep-oc-svg,
    .sheep-offcanvas .sheep-oc-cat-art {
        transition: none;
        animation: none !important;
    }

    .sheep-sidebar .nav-link:hover,
    .sheep-sidebar .sheep-oc-link:hover,
    .sheep-offcanvas .sheep-oc-link:hover,
    .sheep-sidebar .nav-link:active,
    .sheep-sidebar .sheep-oc-link:active,
    .sheep-offcanvas .sheep-oc-link:active {
        transform: none;
    }
}

/* ---- the top bar's buttons as one family (Benji, 2026-10-12) ----
   The language, day / night, bell, search and account buttons share one height and shape: round,
   42 px on desktop, 36 px on tablets and phones, 34 px on the narrowest phones. The tools (language,
   day / night, bell, search) are white with a hairline, as on the model; what belongs to the
   customer (account, basket) is pale orange; "Se connecter" is the full orange pill, or a full orange
   circle where it keeps only its icon. On phones the language is "FR" alone in its circle. The
   address, finer: its pin in a small pale orange disc, the town in bold, a lighter chevron. */
.sheep-topbar {
    --tb-ico: 42px;
}

@media (max-width: 991.98px) {
    .sheep-topbar {
        --tb-ico: 36px;
    }
}

@media (max-width: 379.98px) {
    .sheep-topbar {
        --tb-ico: 34px;
    }
}

/* The tools: white circles with a hairline. */
.sheep-topbar .sheep-topbar-theme,
.sheep-topbar .notification-bell {
    width: var(--tb-ico);
    height: var(--tb-ico);
    border: 1px solid var(--bar-border);
    border-radius: 50%;
    background: var(--bar-bg);
    color: var(--bar-text);
    font-size: 1rem;
}

    .sheep-topbar .sheep-topbar-theme:hover,
    .sheep-topbar .notification-bell:hover {
        background: var(--bar-hover-bg);
    }

@media (max-width: 1199.98px) {
    .sheep-topbar .sheep-topsearch-toggle {
        width: var(--tb-ico);
        height: var(--tb-ico);
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
}

/* Language: "FR ⌄" in a white pill on desktop, "FR" alone in a white circle below. */
.sheep-topbar .sheep-lang-pill {
    height: var(--tb-ico);
    min-width: var(--tb-ico);
    padding: 0 11px 0 14px;
    gap: 5px;
    border: 1px solid var(--bar-border);
    border-radius: 999px;
    background: var(--bar-bg);
    color: var(--bar-text);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

    .sheep-topbar .sheep-lang-pill:hover,
    .sheep-topbar .sheep-lang-pill.show {
        background: var(--bar-hover-bg);
        color: var(--bar-text);
    }

[data-theme="dark"] .sheep-topbar .sheep-lang-pill {
    color: var(--bar-text);
}

@media (max-width: 991.98px) {
    .sheep-topbar .sheep-lang-pill {
        width: var(--tb-ico);
        padding: 0;
        font-size: 0.76rem;
        letter-spacing: 0.02em;
    }

        .sheep-topbar .sheep-lang-pill .sheep-lang-caret {
            display: none;
        }
}

/* The account (signed in): the person in the same white circle with a hairline as "Se connecter"
   and the bell (Benji, 2026-10-13: the bare person beside the bell's circle looked bigger than
   it), in the site's colour; the name only in its menu. */
.sheep-user-dropdown .sheep-topbar-user {
    justify-content: center;
    width: var(--tb-ico);
    height: var(--tb-ico);
    border: 1px solid var(--bar-border);
    border-radius: 50%;
    background: var(--bar-bg);
    color: var(--sheep-accent-dark, #068125);
}

    .sheep-user-dropdown .sheep-topbar-user:hover,
    .sheep-user-dropdown .sheep-topbar-user.show {
        border-color: var(--sheep-accent-line, #bfe2c5);
        background: var(--sheep-accent-soft, #e6f4e8);
        color: var(--sheep-accent-ink, #08701f);
    }

    .sheep-user-dropdown .sheep-topbar-user > .bi {
        margin-right: 0 !important;
        font-size: 1.15rem !important;
        line-height: 1;
    }

    .sheep-user-dropdown .sheep-topbar-user > span,
    .sheep-user-dropdown .sheep-topbar-user.dropdown-toggle::after {
        display: none !important;
    }

[data-theme="dark"] .sheep-user-dropdown .sheep-topbar-user {
    border-color: rgba(148, 163, 184, 0.22);
    background: #1b2742;
    color: var(--sheep-accent-dark, #86d48f);
}

    [data-theme="dark"] .sheep-user-dropdown .sheep-topbar-user:hover,
    [data-theme="dark"] .sheep-user-dropdown .sheep-topbar-user.show {
        background: rgba(var(--sheep-accent-rgb), 0.16);
        color: var(--sheep-accent-ink);
    }

.sheep-topbar .sheep-topbar-basket {
    width: var(--tb-ico);
    height: var(--tb-ico);
}

/* "Se connecter": as tall as its neighbours, a full pill (Benji, 2026-10-13; the site's 12 px
   corners made it a rounded box). */
.sheep-topbar .sheep-topbar-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--tb-ico);
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 0.84rem;
}

    .sheep-topbar .sheep-topbar-signin .bi {
        margin: 0 !important;
        font-size: 1rem;
        line-height: 1;
        -webkit-text-stroke: 0.3px;
    }

@media (max-width: 575.98px) {
    .sheep-topbar .sheep-topbar-signin {
        padding: 0 12px !important;
    }
}

/* Where it keeps only its icon: a full orange circle. */
@media (min-width: 992px) and (max-width: 1199.98px), (max-width: 479.98px) {
    .sheep-topbar .sheep-topbar-signin,
    .sheep-topbar .sheep-topbar-signin.btn-sm.rounded-pill {
        width: var(--tb-ico);
        padding: 0 !important;
        border-radius: 50% !important;
    }

        .sheep-topbar .sheep-topbar-signin .bi {
            font-size: 1.1rem;
        }
}

/* The address: the pin in a pale orange disc, the town in bold, a lighter chevron. */
.sheep-topbar .sheep-addr-btn > .bi-geo-alt {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sheep-accent-soft, #e6f4e8);
    color: var(--sheep-accent-dark, #068125);
    font-size: 1rem;
    line-height: 1;
    transition: background-color .15s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

    .sheep-topbar .sheep-addr-btn > .bi-geo-alt::before {
        -webkit-text-stroke: 0.2px;
    }

.sheep-topbar .sheep-addr-btn .sheep-addr-caret {
    font-size: 0.58rem;
    color: var(--bar-muted);
    -webkit-text-stroke: 0.3px;
    transition: transform .2s ease;
}

@media (hover: hover) {
    .sheep-topbar .sheep-addr-btn:hover > .bi-geo-alt {
        background: var(--sheep-accent-pale);
        transform: translateY(-1px);
    }

    .sheep-topbar .sheep-addr-btn:hover .sheep-addr-caret {
        transform: translateY(1px);
    }
}

[data-theme="dark"] .sheep-topbar .sheep-addr-btn > .bi-geo-alt {
    background: rgba(var(--sheep-accent-rgb), 0.16);
    color: var(--sheep-accent-ink);
}

@media (min-width: 992px) {
    .sheep-topbar .sheep-addr-btn {
        gap: 9px;
        padding: 0 12px 0 4px;
        border-radius: 999px;
    }
}

@media (max-width: 991.98px) {
    .sheep-topbar .sheep-addr-btn {
        height: var(--tb-ico);
        gap: 6px;
        padding: 0 8px 0 3px;
        border-radius: 999px;
    }

        .sheep-topbar .sheep-addr-btn > .bi-geo-alt {
            width: 28px;
            height: 28px;
            font-size: 0.85rem;
        }

        .sheep-topbar .sheep-addr-btn .sheep-addr-text strong {
            font-size: 0.8rem;
            font-weight: 750;
        }
}

@media (max-width: 479.98px) {
    .sheep-topbar .sheep-addr-btn {
        gap: 4px;
        padding: 0 5px 0 2px;
    }

        .sheep-topbar .sheep-addr-btn > .bi-geo-alt {
            width: 26px;
            height: 26px;
            font-size: 0.8rem;
        }
}

/* Small desktops (992 to 1199 px), where the bar is fullest (signed in: language, day / night, bell,
   account, basket): the language is "FR" alone in its circle and the buttons sit a little closer. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sheep-topbar .sheep-lang-pill {
        width: var(--tb-ico);
        padding: 0;
    }

        .sheep-topbar .sheep-lang-pill .sheep-lang-caret {
            display: none;
        }

    .sheep-topbar > .container-fluid > .ms-auto {
        gap: 10px !important;
    }
}

/* Phones and tablets: always a little air between the address and the buttons on the right. */
@media (max-width: 991.98px) {
    .sheep-topbar > .container-fluid > .ms-auto {
        padding-left: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sheep-topbar .sheep-addr-btn > .bi-geo-alt,
    .sheep-topbar .sheep-addr-btn .sheep-addr-caret {
        transition: none;
    }
}

/* ---- the address, smaller, as on Benji's picture (2026-10-12) ----
   "Votre zone" small and grey over the place in bold, then the chevron; the pin stays in its pale
   orange disc, a little smaller. Phones and tablets show the two lines too (not on a phone on its
   side, where the bar is thin). */
.sheep-topbar .sheep-addr-text {
    gap: 1px;
    line-height: 1.12;
}

    .sheep-topbar .sheep-addr-text .sheep-addr-area {
        display: block;
        overflow: hidden;
        color: var(--bar-muted);
        font-size: 0.66rem;
        font-weight: 500;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .sheep-topbar .sheep-addr-text strong {
        color: var(--bar-text);
        font-size: 0.82rem;
        font-weight: 800;
    }

@media (min-width: 992px) {
    .sheep-topbar .sheep-addr-btn {
        gap: 8px;
    }

        .sheep-topbar .sheep-addr-btn > .bi-geo-alt {
            width: 30px;
            height: 30px;
            font-size: 0.9rem;
        }
}

@media (max-width: 991.98px) and (min-height: 521px) {
    .sheep-topbar .sheep-addr-btn .sheep-addr-text .sheep-addr-area {
        display: block;
        font-size: 0.6rem;
    }

    .sheep-topbar .sheep-addr-btn .sheep-addr-text strong {
        font-size: 0.76rem;
    }
}

/* ---- the search as wide as the bar allows (Benji, 2026-10-12) ----
   Wherever the bar shows it (tablets and desktop; the smallest phones have it in the bottom bar),
   the search is a field taking all the room left between delivery / pickup and the buttons on the
   right: magnifier, "Rechercher un plat, un produit, un commerce..." and, when wide enough, the
   filters icon. When the room runs short the filters go first, then the words, and the field ends
   as the round magnifier. A tap still opens the search window. */
@media (min-width: 576px) {
    .sheep-topbar .sheep-topsearch,
    .sheep-topbar .sheep-topbar-center .sheep-topsearch {
        flex: 1 1 0;
        min-width: var(--tb-ico);
        margin-left: 8px;
        margin-right: 0;
    }

    .sheep-topbar .sheep-topsearch .sheep-topsearch-toggle {
        container-type: inline-size;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 9px;
        width: 100%;
        height: var(--tb-ico);
        padding: 0;
        border: 1px solid var(--bar-border);
        border-radius: 999px;
        background: var(--bar-bg);
        color: var(--bar-muted);
    }

        .sheep-topbar .sheep-topsearch .sheep-topsearch-toggle:hover,
        .sheep-topbar .sheep-topsearch .sheep-topsearch-toggle:focus-visible {
            border-color: #dadce0;
            background: var(--bar-bg);
            color: var(--bar-muted);
        }

        .sheep-topbar .sheep-topsearch .sheep-topsearch-toggle .sheep-search-svg {
            flex: 0 0 auto;
            margin-left: 13px;
            color: var(--bar-text);
        }

    .sheep-topbar .sheep-topsearch .sheep-topsearch-hint {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        font-size: 0.8rem;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .sheep-topbar .sheep-topsearch .sheep-topsearch-filter {
        display: block;
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin-right: 15px;
        fill: none;
        stroke: var(--bar-text);
        stroke-width: 1.75;
        stroke-linecap: round;
    }

    [data-theme="dark"] .sheep-topbar .sheep-topsearch .sheep-topsearch-toggle:hover {
        border-color: rgba(255, 255, 255, 0.2);
    }
}

@container (max-width: 220px) {
    .sheep-topbar .sheep-topsearch .sheep-topsearch-filter {
        display: none;
    }
}

@container (max-width: 110px) {
    .sheep-topbar .sheep-topsearch .sheep-topsearch-hint {
        display: none;
    }

    .sheep-topbar .sheep-topsearch .sheep-topsearch-toggle .sheep-search-svg {
        margin: 0 auto;
    }
}

/* ---- in map mode, a slim left bar (Benji, 2026-10-12) ----
   While the map is shown (/map, or the map opened from the list), the sidebar shrinks from 234 px
   to a 92 px rail so the map gets the room: each link becomes its icon or picture with a small
   label under it (two lines at most), the headings and the "Bon appétit" drawing step aside. The
   page and the map follow the rail's width; the top bar above stays exactly as it is. Desktop only (below 992 px there is no sidebar). */
@media (min-width: 992px) {
    :root:has(.hf.hf-map-on) {
        --sidebar-expanded: 92px;
        --sidebar-push-expanded: 100px;
    }

        :root:has(.hf.hf-map-on) .sheep-sidebar {
            padding-top: 8px;
            scrollbar-width: thin;
        }

            :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-side-heading,
            :root:has(.hf.hf-map-on) .sheep-sidebar-art {
                display: none !important;
            }

            :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-side-cats,
            :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-sidenav,
            :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-side-unis {
                gap: 2px;
                padding: 0;
            }

            :root:has(.hf.hf-map-on) .sheep-sidebar .nav-link,
            :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 4px;
                width: auto;
                height: auto;
                min-height: 0;
                margin: 2px 8px;
                padding: 7px 3px 6px;
                border-radius: 12px;
                font-size: 0.62rem;
                font-weight: 650;
                line-height: 1.15;
                text-align: center;
            }

                :root:has(.hf.hf-map-on) .sheep-sidebar .nav-link > span,
                :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link > span:not(.sheep-oc-cat-art) {
                    display: -webkit-box;
                    max-width: 100%;
                    overflow: hidden;
                    white-space: normal;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow-wrap: break-word;
                }

                :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link .sheep-oc-cat-art {
                    flex: 0 0 auto;
                    width: 34px;
                    height: 34px;
                    min-height: 0;
                    margin: 0;
                }

                    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link .sheep-oc-cat-art .hf-ico,
                    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link .sheep-oc-cat-art .hf-ico-art {
                        width: 26px;
                        height: 26px;
                }

                :root:has(.hf.hf-map-on) .sheep-sidebar .nav-link .sheep-oc-svg,
                :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link .nav-cat-ico {
                    margin: 0;
                }

    /* The top bar does not move (Benji, 2026-10-12): the full logo keeps its column, as wide as the
       usual sidebar, whatever the rail below; the address and the rest stay in place. */
    :root:has(.hf.hf-map-on) .sheep-topbar .sheep-topbar-brand {
        width: calc(234px - 8px);
    }

    @media (hover: hover) {
        :root:has(.hf.hf-map-on) .sheep-sidebar .nav-link:hover,
        :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link:hover {
            transform: translateY(-1px);
        }
    }
}

/* ---- shop paused: a quiet orange note instead of the grey box (Benji's review, 2026-10-12) ---- */
.supplier-catalog-paused.alert {
    display: flex;
    align-items: center;
    margin: 0 0 14px;
    padding: 11px 16px;
    border: 1px solid var(--sheep-orange-line, #f6d3b4);
    border-radius: 14px;
    background: var(--sheep-orange-soft, #fdf0e4);
    color: var(--sheep-orange-ink, #a94a1c);
    font-size: 0.86rem;
    font-weight: 600;
}

    .supplier-catalog-paused.alert .bi {
        font-size: 1.05rem;
    }

[data-theme="dark"] .supplier-catalog-paused.alert {
    border-color: rgba(var(--sheep-accent-rgb), 0.35);
    background: rgba(var(--sheep-accent-rgb), 0.14);
    color: var(--sheep-accent-ink);
}

/* ---- phones and tablets: the sheep closer to the edge and a little bigger (Benji, 2026-10-12) ----
   The bar's left padding drops from 16 to 8 px and the small logo grows from 32 to 36.8 px (40, then 8 % smaller); the
   address and the buttons keep their places. Tablets too since 2026-10-13 (the sheep alone there as well). */
@media (max-width: 991.98px) and (min-height: 521px) {
    .sheep-topbar > .container-fluid {
        padding-left: 8px !important;
    }

    .sheep-topbar .sheep-topbar-brand .sheep-brand-mobile {
        height: 36.8px;
    }
}

/* ---- the second review (2026-10-12): a quieter top bar, readable orange, a lighter shop page ----
   "Se connecter" in white with a hairline (the orange stays for the page's main action); the
   person icon in orange. Where it is an icon only, a white circle. */
.sheep-topbar .sheep-topbar-signin,
.sheep-topbar .sheep-topbar-signin.sheep-btn-cta {
    border: 1px solid var(--bar-border) !important;
    background: var(--bar-bg) !important;
    color: var(--bar-text) !important;
    box-shadow: none !important;
}

    .sheep-topbar .sheep-topbar-signin .bi {
        color: var(--sheep-accent-dark, #068125);
    }

    .sheep-topbar .sheep-topbar-signin:hover,
    .sheep-topbar .sheep-topbar-signin:focus-visible {
        border-color: var(--sheep-accent-line, #bfe2c5) !important;
        background: var(--sheep-accent-soft, #e6f4e8) !important;
        color: var(--sheep-accent-ink, #08701f) !important;
    }

[data-theme="dark"] .sheep-topbar .sheep-topbar-signin,
[data-theme="dark"] .sheep-topbar .sheep-topbar-signin.sheep-btn-cta {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: #1b2742 !important;
    color: #e9ebee !important;
}

    [data-theme="dark"] .sheep-topbar .sheep-topbar-signin:hover {
        background: rgba(var(--sheep-accent-rgb), 0.16) !important;
        color: var(--sheep-accent-ink) !important;
    }

/* White words on the orange gradient: a faint shadow under them, on the main buttons only. */
.ld-entry-gps,
.acc-submit,
.sheep-mode-top .sheep-mode-btn.active,
.sheep-mode-switch-top,
.hf-uni.active,
.hf-mode-btn.active {
    text-shadow: 0 1px 1px rgba(var(--sheep-accent-shade-rgb, 10, 50, 20), 0.25);
}

/* The shop page: lighter frames, a tighter presentation block, grey hairline scrollbars instead of
   the green ones, and the mascot small and faded where a dish has no photo. */
.supplier-catalog-page .supplier-catalog-header-card {
    padding: 1rem 1.1rem;
}

.supplier-catalog-page .supplier-catalog-item-card {
    border-color: rgba(32, 33, 36, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.supplier-catalog-page .supplier-category-tabs,
.supplier-catalog-page .supplier-catalog-photo-strip {
    scrollbar-color: rgba(32, 33, 36, 0.18) transparent;
}

    .supplier-catalog-page .supplier-category-tabs::-webkit-scrollbar,
    .supplier-catalog-page .supplier-catalog-photo-strip::-webkit-scrollbar {
        height: 5px;
    }

    .supplier-catalog-page .supplier-category-tabs::-webkit-scrollbar-thumb,
    .supplier-catalog-page .supplier-catalog-photo-strip::-webkit-scrollbar-thumb {
        background: rgba(32, 33, 36, 0.16);
    }

        .supplier-catalog-page .supplier-category-tabs::-webkit-scrollbar-thumb:hover,
        .supplier-catalog-page .supplier-catalog-photo-strip::-webkit-scrollbar-thumb:hover {
            background: rgba(32, 33, 36, 0.3);
        }

.supplier-catalog-media-wrap .supplier-catalog-media-placeholder-image {
    padding: 24%;
    background: #f5f6f7;
    object-fit: contain;
    opacity: 0.5;
}

[data-theme="dark"] .supplier-catalog-page .supplier-category-tabs,
[data-theme="dark"] .supplier-catalog-page .supplier-catalog-photo-strip {
    scrollbar-color: rgba(233, 235, 238, 0.22) transparent;
}

[data-theme="dark"] .supplier-catalog-media-wrap .supplier-catalog-media-placeholder-image {
    background: #282f3e;
}

/* The side menus: the universe pictures sit straight on the row, without their grey square (one
   frame less); the current universe keeps its white tile. */
.sheep-sidebar .sheep-oc-cat-art,
.sheep-offcanvas .sheep-oc-cat-art {
    background: transparent;
}

    .sheep-sidebar .sheep-oc-cat-art .hf-ico-art,
    .sheep-offcanvas .sheep-oc-cat-art .hf-ico-art {
        width: 36px;
        height: 36px;
    }

.sheep-sidebar .sheep-oc-link.active .sheep-oc-cat-art,
.sheep-offcanvas .sheep-oc-link.active .sheep-oc-cat-art {
    background: #fff;
}

/* ---- the phone menu's close button in the green gradient (Benji, 2026-10-12) ----
   A green disc with a white cross, like the other main buttons, in both themes; a green ring on
   keyboard focus, never the browser's black one. */
.sheep-offcanvas .sheep-oc-close,
[data-theme="dark"] .sheep-offcanvas .sheep-oc-close {
    border: 0;
    background: var(--sheep-grad);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--sheep-accent-dark-rgb), 0.3);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}

    .sheep-offcanvas .sheep-oc-close:hover,
    [data-theme="dark"] .sheep-offcanvas .sheep-oc-close:hover {
        background: var(--sheep-grad);
        filter: brightness(1.08);
    }

    .sheep-offcanvas .sheep-oc-close:active {
        transform: scale(0.94);
    }

    .sheep-offcanvas .sheep-oc-close:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sheep-accent-line), 0 4px 12px rgba(var(--sheep-accent-dark-rgb), 0.3);
    }

    .sheep-offcanvas .sheep-oc-close svg {
        stroke: #fff;
        stroke-width: 2.25;
    }

/* Horizontal strips dragged with the mouse (site.js): a grabbing hand, no text selection, and the
   strip follows the pointer directly (no snapping or smooth scrolling while it moves). */
@media (hover: hover) and (pointer: fine) {
    .hf-unis,
    .hf-chips,
    .supplier-category-tabs,
    .supplier-catalog-photo-strip {
        cursor: grab;
    }
}

.is-drag-scrolling,
.is-drag-scrolling * {
    cursor: grabbing !important;
    user-select: none;
    -webkit-user-select: none;
}

.is-drag-scrolling {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}

/* ---- delivery / pickup on phones: a pill that moves (Benji, 2026-10-12) ----
   Phones and tablets (360 to 991 px), in the top bar: the chosen mode shows its name, the other its
   icon, so the pair stays small. A tap swaps them with a short animation: the green pill fades in
   under the other side as the name folds into an icon there and the icon opens into a name here, so
   the pill seems to slide from one side to the other. The tap swaps the classes at once
   (DeliveryModeToggle); the page that opens in the other mode confirms them. */
@media (min-width: 360px) and (max-width: 991.98px) and (min-height: 521px) {
    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn,
    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn:not(.active) {
        position: relative;
        isolation: isolate;
        gap: 0;
        padding: 6px 10px;
        background: transparent;
        color: var(--bar-text);
        font-size: 0.76rem;
        transition: color .25s ease, box-shadow .35s ease;
    }

        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background: var(--sheep-grad);
            opacity: 0;
            transform: scale(0.82);
            transition: opacity .28s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
        }

        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active {
            background: transparent;
            color: #fff;
        }

            .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active::before {
                opacity: 1;
                transform: none;
            }

        /* The name and the icon fold and open instead of appearing at once. */
        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn .bi,
        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn span,
        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active .bi,
        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active span,
        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn:not(.active) span {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            vertical-align: middle;
            line-height: 1.2;
            transition: max-width .38s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
        }

        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn:not(.active) span,
        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active .bi {
            max-width: 0;
            opacity: 0;
        }

        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active span {
            max-width: 6.5em;
            opacity: 1;
        }

        .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn:not(.active) .bi {
            max-width: 1.4em;
            opacity: 1;
        }
}

/* Small phones (360 to 399 px): a little tighter, and the address drops its chevron to make room. */
@media (min-width: 360px) and (max-width: 399.98px) and (min-height: 521px) {
    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn,
    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn:not(.active) {
        padding: 5px 8px;
        font-size: 0.72rem;
    }

    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-addr-btn .sheep-addr-caret {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sheep-topbar .sheep-mode-top .sheep-mode-btn,
    .sheep-topbar .sheep-mode-top .sheep-mode-btn::before,
    .sheep-topbar .sheep-mode-top .sheep-mode-btn .bi,
    .sheep-topbar .sheep-mode-top .sheep-mode-btn span {
        transition: none !important;
    }
}

/* Phones up to 414 px: the pill a touch smaller; up to 399 px the address's pin disc too, so
   "Lausanne" keeps its letters in both modes. */
@media (min-width: 360px) and (max-width: 414.98px) and (min-height: 521px) {
    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn,
    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn:not(.active) {
        padding: 5px 7px;
        font-size: 0.7rem;
    }

    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top {
        margin-left: 2px;
    }
}

@media (min-width: 360px) and (max-width: 399.98px) and (min-height: 521px) {
    .sheep-topbar .sheep-addr-btn {
        gap: 3px;
        padding-left: 0;
    }

        .sheep-topbar .sheep-addr-btn > .bi-geo-alt {
            width: 22px;
            height: 22px;
            font-size: 0.72rem;
        }
}

@media (min-width: 360px) and (max-width: 374.98px) and (min-height: 521px) {
    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top {
        margin-left: 0;
    }

    .sheep-topbar > .container-fluid {
        padding-left: 6px !important;
    }
}

/* The side menus: the universe pictures larger too (Benji, 2026-10-12). */
.sheep-sidebar .sheep-oc-cat-art,
.sheep-offcanvas .sheep-oc-cat-art {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
}

    .sheep-sidebar .sheep-oc-cat-art .hf-ico-art,
    .sheep-offcanvas .sheep-oc-cat-art .hf-ico-art {
        width: 44px;
        height: 44px;
    }

/* ---- delivery / pickup: always the pill, signed in too (Benji, 2026-10-12) ----
   Signed-in customers get the same moving pill as visitors (the one-button switch is gone from the
   bar). To make room on phones and tablets, the language stays in the bottom bar's second row for
   them, as before with the switch. */
@media (max-width: 991.98px) {
    .sheep-topbar:has(.sheep-user-dropdown) .dropdown:has(> .sheep-lang-pill) {
        display: none;
    }
}

/* ==========================================================================
   The site in orange (Benji, 2026-10-12)
   Some readers prefer the orange the site had before the green: the profile menu and the profile
   page offer the choice. It is kept in the browser (site.js, sheepMeAccent) and shown as
   <html data-accent="orange">; the accent tokens then take the orange values, light and dark. The
   logo's own green (--sheep-green) stays green, and the hero keeps its orange. The second selector
   reaches the layout and the body, which carry data-theme and set the tokens again for the dark
   theme. Nothing else in the stylesheets names a green by hand since then: the tokens do.
   ========================================================================== */
[data-accent="orange"],
[data-accent="orange"] [data-theme] {
    --sheep-accent: #ef8839;
    --sheep-accent-dark: #e76423;
    --sheep-accent-ink: #a94a1c;
    --sheep-accent-soft: #fdf0e4;
    --sheep-accent-line: #f6d3b4;
    --sheep-accent-light: #f39f3f;
    --sheep-accent-pale: #fbe3cc;
    --sheep-accent-rgb: 239, 136, 57;
    --sheep-accent-dark-rgb: 231, 100, 35;
    --sheep-accent-ink-rgb: 169, 74, 28;
    --sheep-accent-light-rgb: 243, 159, 63;
    --sheep-grad: linear-gradient(180deg, #f39f3f 0%, #ef8839 50%, #e76423 100%);
    --sheep-grad-hover: linear-gradient(180deg, #ea9637 0%, #e67d30 50%, #da5a1e 100%);
    --sheep-grad-deep: linear-gradient(180deg, #f39f3f 0%, #ec7a2c 100%);
    --sheep-grad-second: linear-gradient(180deg, #1a9524 0%, #0f8b27 55%, #068125 100%); /* on the orange site the other colour is the logo's green */
    --sheep-grad-second-hover: linear-gradient(180deg, #2fae40 0%, #0c8223 55%, #04761f 100%);
    --sheep-accent-shade-rgb: 120, 40, 0; /* the shadow under the white words of the main buttons */
    /* The second colour swaps too (Benji, 2026-10-13): promotions, "Bientôt", the demo note and
       the warnings that are orange on the green site are green on the orange site. The tokens keep
       their "orange" name, since every stylesheet knows them by it; they hold the other colour. */
    --sheep-orange: #0f8b27;
    --sheep-orange-dark: #068125;
    --sheep-orange-ink: #08701f;
    --sheep-orange-soft: #e6f4e8;
    --sheep-orange-line: #bfe2c5;
    --sheep-orange-rgb: 15, 139, 39;
    --sheep-orange-dark-rgb: 6, 129, 37;
    --sheep-orange-ink-rgb: 8, 112, 31;
    --sheep-orange-light-rgb: 26, 149, 36;
}

[data-accent="orange"][data-theme="dark"],
/* ...and whatever the layout block says of the theme once the page itself is dark (a page without a
   circuit keeps the server's "light" on it): the second colour must stay the dark green there. */
[data-accent="orange"][data-theme="dark"] [data-theme],
[data-accent="orange"] [data-theme="dark"] {
    --sheep-accent: #f5a04d;
    --sheep-accent-dark: #ef8839;
    --sheep-accent-ink: #f9c792;
    --sheep-accent-soft: rgba(239, 136, 57, 0.16);
    --sheep-accent-line: rgba(245, 160, 77, 0.42);
    --sheep-accent-light: #f6b366;
    --sheep-accent-pale: rgba(245, 160, 77, 0.22);
    --sheep-accent-rgb: 245, 160, 77;
    --sheep-accent-dark-rgb: 239, 136, 57;
    --sheep-accent-ink-rgb: 249, 199, 146;
    --sheep-accent-light-rgb: 246, 179, 102;
    --sheep-orange: #45bf55;
    --sheep-orange-dark: #2fae40;
    --sheep-orange-ink: #a6e2ae;
    --sheep-orange-soft: rgba(134, 212, 143, 0.16);
    --sheep-orange-line: rgba(134, 212, 143, 0.35);
    --sheep-orange-rgb: 69, 191, 85;
    --sheep-orange-dark-rgb: 47, 174, 64;
    --sheep-orange-ink-rgb: 166, 226, 174;
    --sheep-orange-light-rgb: 134, 212, 143;
}

/* The choice itself. In the profile menu, the words name the other colour, with a dot of it. On the
   profile page, two round buttons with a swatch of each; the chosen one is outlined in the site's
   colour (aria-pressed from site.js, and the stylesheet knows it too before the script runs). */
.sheep-accent-item .sheep-accent-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f39f3f 0%, #ef8839 50%, #e76423 100%);
    vertical-align: -1px;
}

[data-accent="orange"] .sheep-accent-item .sheep-accent-dot {
    background: linear-gradient(180deg, #1a9524 0%, #0f8b27 55%, #068125 100%);
}

.sheep-accent-to-green,
[data-accent="orange"] .sheep-accent-to-orange {
    display: none;
}

[data-accent="orange"] .sheep-accent-to-green {
    display: inline;
}

.sheep-accent-pick-title {
    margin-bottom: 8px;
    font-weight: 600;
}

.sheep-accent-pick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sheep-accent-opt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 132px;
    padding: 10px 18px 10px 14px;
    border: 1.5px solid var(--surface-border-strong, #dadce0);
    border-radius: 999px;
    background: var(--surface-bg, #fff);
    color: inherit;
    font-weight: 600;
    transition: border-color .15s, box-shadow .15s;
}

    .sheep-accent-opt:hover {
        border-color: var(--sheep-accent);
    }

    .sheep-accent-opt .sheep-accent-swatch {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    }

    .sheep-accent-opt.is-green .sheep-accent-swatch {
        background: linear-gradient(180deg, #1a9524 0%, #0f8b27 55%, #068125 100%);
    }

    .sheep-accent-opt.is-orange .sheep-accent-swatch {
        background: linear-gradient(180deg, #f39f3f 0%, #ef8839 50%, #e76423 100%);
    }

    .sheep-accent-opt[aria-pressed="true"],
    :root:not([data-accent="orange"]) .sheep-accent-opt.is-green:not([aria-pressed="false"]),
    [data-accent="orange"] .sheep-accent-opt.is-orange:not([aria-pressed="false"]) {
        border-color: var(--sheep-accent);
        box-shadow: 0 0 0 3px var(--sheep-accent-soft);
    }

/* ---- the bottom bar's buttons named (Benji, 2026-10-13) ----
   A small word under each icon, inside the same 44 px square: the icon rises 5 px and the word
   sits at the bottom, so no button moves or grows and the rows keep their height. The round
   button says "Plus" until it opens (then the cross alone, centred). Phones on their side keep
   the icons only (38 px buttons). */
.sheep-bb > .sheep-bb-svg,
.sheep-bb > .sheep-bottom-ico {
    transform: translateY(-5px);
}

.sheep-bb-label {
    position: absolute;
    left: 50%;
    bottom: 3px;
    transform: translateX(-50%);
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
}

.sheep-bb-center .sheep-bb-label {
    bottom: 4px;
    color: #fff;
}

.sheep-quick-toggle:checked ~ .sheep-bottom-nav .sheep-bb-center .sheep-bb-label {
    display: none;
}

.sheep-quick-toggle:checked ~ .sheep-bottom-nav .sheep-bb-center > .sheep-bb-x {
    transform: none;
}

@media (max-height: 520px) and (orientation: landscape) {
    .sheep-bb-label {
        display: none;
    }

    .sheep-bb > .sheep-bb-svg,
    .sheep-bb > .sheep-bottom-ico {
        transform: none;
    }
}

/* ---- the basket's count: a small number at the top right of each basket, in the site's colour
   (Benji, 2026-10-13) ----
   Top bar and bottom bar alike: a little disc in the site's gradient (green, or orange for the
   readers who chose it), white number, a ring in the bar's colour. On desktop and tablets the
   basket with items is the same round button as the empty one, the number on its corner; the
   total stays in its tooltip. Phones keep their basket bar above the bottom bar, with the total. */
.sheep-basket-count,
.sheep-bottom-badge {
    top: -6px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid var(--bar-bg, #fff);
    background: var(--sheep-grad);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 13px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.sheep-bb .sheep-bottom-badge {
    top: -6px;
    right: -9px;
    border-color: #fff;
}

[data-theme="dark"] .sheep-bb .sheep-bottom-badge {
    border-color: #1b2742;
}

.sheep-basket-pill:hover .sheep-basket-count,
.sheep-basket-pill:focus-visible .sheep-basket-count {
    background: var(--sheep-grad-hover);
    color: #fff;
}

@media (min-width: 576px) {
    .sheep-topbar .sheep-basket-pill,
    .sheep-topbar .sheep-basket-pill:hover,
    .sheep-topbar .sheep-basket-pill:focus-visible {
        width: var(--tb-ico);
        height: var(--tb-ico);
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 50%;
        background: var(--sheep-accent-soft);
        color: var(--sheep-accent-dark);
        box-shadow: none;
        transform: none;
    }

        .sheep-topbar .sheep-basket-pill:hover,
        .sheep-topbar .sheep-basket-pill:focus-visible {
            background: var(--sheep-accent-pale);
            color: var(--sheep-accent-ink);
        }

        .sheep-topbar .sheep-basket-pill .sheep-basket-label,
        .sheep-topbar .sheep-basket-pill .sheep-basket-total {
            display: none;
        }

        .sheep-topbar .sheep-basket-pill .sheep-basket-ico {
            font-size: 1.15rem;
        }

        /* The ring matches the white bar; the number keeps the gradient on mouse-over. */
        .sheep-topbar .sheep-basket-pill .sheep-basket-count {
            border-color: var(--bar-bg, #fff);
        }

    [data-theme="dark"] .sheep-topbar .sheep-basket-pill,
    [data-theme="dark"] .sheep-topbar .sheep-basket-pill:hover {
        background: rgba(var(--sheep-accent-rgb), 0.16);
        color: var(--sheep-accent-ink);
    }
}

/* ---- the sign-in and sign-up pages without the developers' note (Benji, 2026-10-13) ----
   When no outside service (Google, Apple...) is set up, the note saying so and the "ou" line
   above it are for the developers: hidden. */
.acc-ext-none,
main:has(.acc-ext-none) .ld-entry-divider {
    display: none !important;
}

/* ---- the empty basket (Benji, 2026-10-13): like the site's other empty states ---- */
.co-empty {
    max-width: 480px;
    margin: 24px auto;
    padding: 40px 24px;
    text-align: center;
    border: 1px solid var(--surface-border, #e9ebee);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface-bg, #fff);
}

.co-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--sheep-accent-soft, #e6f4e8);
    color: var(--sheep-accent-dark, #068125);
    font-size: 2rem;
}

.co-empty-title {
    margin: 0 0 18px;
    font-family: var(--sheep-display);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--sheep-heading, #202124);
}

.co-empty-btn {
    min-width: 220px;
}

[data-theme="dark"] .co-empty {
    background: #1b2742;
    border-color: rgba(148, 163, 184, 0.22);
}

[data-theme="dark"] .co-empty-title {
    color: #e9ebee;
}

/* ---- one lettering for the pages' titles (Benji, 2026-10-13) ----
   "Mes commandes" and the other simple pages: the account's title, Nunito, heavy, the heading colour. */
.sheep-page-title {
    font-family: var(--sheep-display);
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sheep-heading, #202124);
}

[data-theme="dark"] .sheep-page-title {
    color: #e9ebee;
}

/* ---- one lettering for the pages' titles, everywhere (Benji, 2026-10-13) ----
   The supplier's and the deliverer's pages, the order page, the transactions, the notifications:
   their green Inter titles take the site's title lettering and colour, like the account, the
   orders and the shops. The small green "fw-bold" captions in cards (h2.h4...) keep their size. */
h1.text-sheep-green,
h2.text-sheep-green {
    font-family: var(--sheep-display);
    font-weight: 900 !important;
    letter-spacing: -0.02em;
    color: var(--sheep-heading, #202124) !important;
}

[data-theme="dark"] h1.text-sheep-green,
[data-theme="dark"] h2.text-sheep-green {
    color: #e9ebee !important;
}

/* ---- the dark theme on the supplier's and the deliverer's pages (Benji, 2026-10-13) ----
   Found on the review: the "Release your funds" and "Payout summary" titles, the rows of the
   transaction lists and the order sections' toggles kept their light-theme ink (buttons default
   to black), and the deliverer's availability card kept its white gradient. */
[data-theme="dark"] .release-funds-card h2,
[data-theme="dark"] .payout-summary-card h2 {
    color: #e9ebee;
}

[data-theme="dark"] button.transaction-row,
[data-theme="dark"] button.supplier-section-toggle {
    color: inherit;
}

[data-theme="dark"] .deliverer-availability-card {
    background: #1b2742 !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

/* The notifications' technical type ("order_cancelled") is for the developers: hidden. */
.notif-type-badge {
    display: none;
}

/* ---- the entry pages before any position (Benji, 2026-10-13) ----
   Home, sign-in and sign-up while no position or address is known yet (<html> without
   sm-has-location, site.js): delivery / pickup, the address and the search would lead nowhere, so
   the bar drops them, as the home page already did; and the long Sheep-Me logo takes the room on
   every screen size, in place of the sheep alone. */
html:not(.sm-has-location) body:has(.ld.ld-simple) .sheep-topbar .sheep-mode-top,
html:not(.sm-has-location) body:has(.ld.ld-simple) .sheep-topbar .sheep-topsearch,
html:not(.sm-has-location) body:has(.ld.ld-simple) .sheep-topbar .sheep-addr-btn {
    display: none !important;
}

@media (max-width: 991.98px) {
    html:not(.sm-has-location) body:has(.ld.ld-simple) .sheep-topbar .sheep-topbar-brand {
        margin-right: 8px;
    }

        html:not(.sm-has-location) body:has(.ld.ld-simple) .sheep-topbar .sheep-topbar-brand .sheep-brand-mobile {
            display: none !important;
        }

        html:not(.sm-has-location) body:has(.ld.ld-simple) .sheep-topbar .sheep-topbar-brand .sheep-brand-light,
        html:not(.sm-has-location)[data-theme="dark"] body:has(.ld.ld-simple) .sheep-topbar .sheep-topbar-brand .sheep-brand-dark {
            display: block !important;
            width: auto;
            height: 34px;
        }

        html:not(.sm-has-location)[data-theme="dark"] body:has(.ld.ld-simple) .sheep-topbar .sheep-topbar-brand .sheep-brand-light {
            display: none !important;
        }
}

/* ---- the end of the pages above the phone's bottom bar (Benji, 2026-10-13) ----
   <main> lost its bottom padding when the footer moved inside it ("padding-bottom: 0 !important"
   above), so the footer's last lines, and on the pages without a footer the last content, ended
   under the floating bar, upright and on the side alike. The room is given back here: under the
   footer when there is one, under the page otherwise; not on the entry pages, which have no bar. */
@media (max-width: 991.98px) {
    body:not(:has(.ld-simple.ld-no-address.ld-guest)):not(:has(.acc-login)):not(:has(.otr-focus)) .main-content .sheep-public-footer {
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    body:not(:has(.ld-simple.ld-no-address.ld-guest)):not(:has(.acc-login)):not(:has(.otr-focus)) .main-content:not(:has(.sheep-public-footer)) {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
}

/* The public pages (about, legal): their titles in the site's lettering, as every other page
   (Benji, 2026-10-13: they kept the plain text face). */
.sheep-public-page h1,
.sheep-public-page h2 {
    font-family: var(--sheep-display, inherit);
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* "Mes commandes": the refresh button beside the title, a round button on phones (Benji, 2026-10-13). */
@media (max-width: 767.98px) {
    .orders-refresh {
        width: 42px;
        height: 42px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }
}

/* A phone on its side: the bar is 46 px tall, and the footer stays hidden (PublicFooter.razor), so
   the page itself keeps the room. */
@media (max-width: 991.98px) and (max-height: 520px) and (orientation: landscape) {
    body:not(:has(.ld-simple.ld-no-address.ld-guest)):not(:has(.acc-login)):not(:has(.otr-focus)) .main-content {
        padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    }
}

/* ---- delivery / pickup, each in its colour (Benji, 2026-10-13) ----
   The track stays grey and the side not chosen keeps its grey icon; the chosen side is solid:
   delivery in the main colour's gradient (green), pickup in the second colour's (orange). On the
   orange site the two swap by themselves, since the tokens do. The gradients are written where
   they are used, so that a layout block with its own theme tokens is honoured. Same idea on the
   signed-in one-tap switch, solid too: green on delivery, orange on pickup. */
.sheep-mode-top .sheep-mode-btn.active[data-mode="pickup"] {
    text-shadow: 0 1px 1px rgba(var(--sheep-orange-ink-rgb), 0.25);
}

@media (min-width: 992px) {
    .sheep-topbar .sheep-mode-top .sheep-mode-btn.active[data-mode="pickup"] {
        background: var(--sheep-grad-second);
        box-shadow: 0 4px 12px rgba(var(--sheep-orange-dark-rgb), 0.28);
    }
}

/* Phones and tablets: the pill that moves paints its colour on its ::before. */
@media (min-width: 360px) and (max-width: 991.98px) and (min-height: 521px) {
    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn[data-mode="pickup"]::before {
        background: var(--sheep-grad-second);
    }

    .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active[data-mode="pickup"] {
        box-shadow: 0 4px 12px rgba(var(--sheep-orange-dark-rgb), 0.28);
    }

    /* The signed-in one-tap switch, solid like the pill: green on delivery, orange on pickup. */
    .sheep-mode-switch-top,
    .sheep-mode-switch-top:hover,
    .sheep-mode-switch-top:focus-visible {
        border-radius: 999px;
        background: var(--sheep-grad);
        box-shadow: 0 4px 12px rgba(var(--sheep-accent-dark-rgb), 0.28);
        color: #fff;
        text-shadow: 0 1px 1px rgba(var(--sheep-accent-shade-rgb, 10, 50, 20), 0.25);
    }

    .sheep-mode-switch-top.is-pickup,
    .sheep-mode-switch-top.is-pickup:hover,
    .sheep-mode-switch-top.is-pickup:focus-visible,
    [data-theme="dark"] .sheep-mode-switch-top.is-pickup {
        background: var(--sheep-grad-second);
        box-shadow: 0 4px 12px rgba(var(--sheep-orange-dark-rgb), 0.28);
        color: #fff;
        text-shadow: 0 1px 1px rgba(var(--sheep-orange-ink-rgb), 0.25);
    }

        .sheep-mode-switch-top .sheep-mode-switch-swap {
            opacity: 0.85;
        }
}

/* The side not chosen keeps its icon only, on desktop as on phones (Benji, 2026-10-14): "Delivery"
   with its truck when delivery is on and the bag alone beside it, the other way round on pickup.
   The name stays in the tooltip. */
@media (min-width: 992px) {
    .sheep-topbar .sheep-mode-top .sheep-mode-btn:not(.active) span {
        display: none;
    }

    .sheep-topbar .sheep-mode-top .sheep-mode-btn:not(.active) {
        padding: 0 13px;
    }
}

/* The pill keeps one width in both modes (Benji, 2026-10-14): the name's box is as wide as the
   longer of the two names (a hidden copy of the other one, data-other, under it in a grid of one
   column), and the two icons share one width, so nothing grows or shrinks when the mode flips. */
.sheep-mode-top .sheep-mode-btn span[data-other],
.sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn span[data-other],
.sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active span[data-other] {
    display: inline-grid;
    grid-template-columns: minmax(0, max-content);
    justify-items: center;
    text-align: center;
}

    .sheep-mode-top .sheep-mode-btn span[data-other]::after {
        content: attr(data-other);
        grid-column: 1;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        white-space: nowrap;
    }

.sheep-mode-top .sheep-mode-btn .bi,
.sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn .bi,
.sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn:not(.active) .bi {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}

/* ...and the side not chosen still hides its name on desktop (the grid above would show it). */
@media (min-width: 992px) {
    .sheep-topbar .sheep-mode-top .sheep-mode-btn:not(.active) span[data-other] {
        display: none;
    }
}

/* Benji's new long logo (2026-10-14) is more compact (3:1 instead of 5:1): a little taller in the
   desktop bar, so that it keeps its presence. */
@media (min-width: 992px) {
    .sheep-topbar .sheep-topbar-brand img {
        height: 40px;
    }
}

/* ---- Benji's vertical menu (2026-10-14) ----
   Desktop: the sidebar is a white rounded card standing a little below the top bar and off the
   left edge, its top and its corners in line with the hero's; behind it the home feed's page is
   pale. Everywhere: the fifteen main categories as rows, the picture, the full name and a chevron,
   with hairlines between the rows. */
@media (min-width: 992px) {
    .sheep-sidebar {
        top: calc(var(--navbar-height) + 30px);
        left: 16px;
        bottom: 16px;
        border: 1px solid var(--oc-line);
        border-radius: 24px;
        box-shadow: 0 6px 24px rgba(32, 33, 36, 0.06);
    }

    .main-content {
        padding-left: calc(var(--sidebar-push-expanded) + 16px);
    }

    body:has(.main-content.hf-host) {
        background: #f2f5f9;
    }

    html[data-theme="dark"] body:has(.main-content.hf-host) {
        background: var(--bs-body-bg, #111a2b);
    }

    [data-theme="dark"] .sheep-sidebar {
        box-shadow: none;
    }
}

.sheep-side-unis {
    margin: 0 12px;
}

    .sheep-side-unis .sheep-oc-uni {
        gap: 12px;
        min-height: 60px;
        margin: 0;
        padding: 6px 8px 6px 10px;
        border-radius: 12px;
        border-bottom: 1px solid var(--oc-line, #e9ebee);
        font-size: 0.86rem;
        font-weight: 600;
    }

        .sheep-side-unis .sheep-oc-uni:last-child {
            border-bottom: 0;
        }

/* Flat pictos on a plinth tinted with the universe's colour (Eric, 2026-10-16): one family of signs in
   the menu; Benji's rendered pictures stay where the eye lingers (home tiles, category covers). */
.sheep-sidebar .sheep-oc-link .sheep-oc-uni-art,
.sheep-offcanvas .sheep-oc-link .sheep-oc-uni-art {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: rgba(var(--uni-rgb), 0.16);
}

.sheep-sidebar .sheep-oc-uni.active .sheep-oc-uni-art,
.sheep-offcanvas .sheep-oc-uni.active .sheep-oc-uni-art,
[data-theme="dark"] .sheep-offcanvas .sheep-oc-uni.active .sheep-oc-uni-art {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: rgba(var(--uni-rgb), 0.3);
}

.sheep-oc-uni-art .hf-ico {
    width: 24px;
    height: 24px;
    color: rgb(var(--uni-rgb));
}

.sheep-oc-uni-name {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.sheep-oc-chev {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.45;
}

/* The card is a little wider on desktop, so that most of the fifteen names stay on one line, and
   its headings line up with the pictures (Benji's mockup, 2026-10-14). */
@media (min-width: 992px) {
    :root {
        --sidebar-expanded: 280px;
    }

    .sheep-sidebar .sheep-side-heading {
        padding-left: 22px;
    }

    .sheep-side-unis .sheep-oc-uni {
        font-size: 0.84rem;
    }
}

@media (min-width: 1280px) {
    :root {
        --sidebar-expanded: 300px;
    }
}

/* Benji's review (2026-10-14, later): the card closer to the top bar and to the left edge (12 px),
   no scrollbar on it (it still scrolls, the mouse wheel and the keyboard work), so its top-right
   corner is round like the others. The hero stands on the same line, with its own card. */
@media (min-width: 992px) {
    :root {
        --side-gap: 12px;
    }

    .sheep-sidebar {
        top: calc(var(--navbar-height) + 6px + var(--side-gap));
        left: var(--side-gap);
        bottom: var(--side-gap);
        scrollbar-width: none;
    }

        .sheep-sidebar::-webkit-scrollbar {
            display: none;
        }

    .main-content {
        padding-left: calc(var(--sidebar-push-expanded) + var(--side-gap));
    }
}

/* ...measured (2026-10-14): the bar ends 2 px below the page's start, so 12 px under it; and the
   hero 16 px from the card (the feed's own 24 px padding counted in). */
@media (min-width: 992px) {
    .sheep-sidebar {
        top: calc(var(--navbar-height) + 2px + var(--side-gap));
    }

    .main-content {
        padding-left: calc(var(--sidebar-expanded) + var(--side-gap) + 4px);
    }
}

/* ...and 16 px between the card and the hero: the feed pads its own side by 24 px. */
@media (min-width: 992px) {
    .main-content {
        padding-left: calc(var(--sidebar-expanded) + var(--side-gap) - 8px);
    }
}

/* Closer to Benji's mockup (2026-10-14, "regarde mieux"): no frame on the card, a soft shadow only;
   bigger pictures (56 px) and names, rows of 64 px whose hairline starts after the picture; a
   wider card so that the names hold. */
@media (min-width: 992px) {
    :root {
        --sidebar-expanded: 292px;
    }

    .sheep-sidebar {
        border: 0;
        box-shadow: 0 2px 14px rgba(32, 33, 36, 0.06);
    }

    .sheep-sidebar .sheep-side-heading {
        padding: 16px 22px 8px;
        font-size: 0.8rem;
        letter-spacing: 0.12em;
    }

    .sheep-side-unis .sheep-oc-uni {
        gap: 14px;
        min-height: 64px;
        padding: 4px 6px 4px 8px;
        border-bottom: 0;
        background-image: linear-gradient(var(--oc-line, #e9ebee), var(--oc-line, #e9ebee));
        background-size: calc(100% - 70px) 1px;
        background-repeat: no-repeat;
        background-position: right bottom;
        font-size: 0.9rem;
    }

        .sheep-side-unis .sheep-oc-uni:last-child {
            background-image: none;
        }

    .sheep-sidebar .sheep-oc-link .sheep-oc-uni-art,
    .sheep-sidebar .sheep-oc-uni.active .sheep-oc-uni-art {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

        .sheep-sidebar .sheep-oc-uni-art .hf-ico {
            width: 26px;
            height: 26px;
        }

    [data-theme="dark"] .sheep-sidebar {
        box-shadow: none;
    }
}

@media (min-width: 1280px) {
    :root {
        --sidebar-expanded: 320px;
    }
}

/* The address right after the logo, then delivery / pickup, then the search (Benji, 2026-10-14):
   the logo no longer keeps a column as wide as the sidebar. */
@media (min-width: 992px) {
    .sheep-topbar-brand,
    :root:has(.hf.hf-map-on) .sheep-topbar .sheep-topbar-brand {
        width: auto;
        margin-right: 18px;
    }
}

/* The rail beside the open map (2026-10-14): the fifteen rows keep their picture only, centred,
   without name, chevron or hairline (the name stays in the tooltip of the row). */
@media (min-width: 992px) {
    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-side-unis {
        margin: 0 6px;
    }

    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-uni {
        justify-content: center;
        gap: 0;
        min-height: 58px;
        padding: 4px 0;
        background-image: none;
    }

        :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-uni .sheep-oc-uni-name,
        :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-uni .sheep-oc-chev {
            display: none;
        }

    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link .sheep-oc-uni-art {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

        :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link .sheep-oc-uni-art .hf-ico-art {
            width: 46px;
            height: 46px;
        }
}

/* ...said with enough weight to beat the rail's two-line names. */
@media (min-width: 992px) {
    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link.sheep-oc-uni > span.sheep-oc-uni-name {
        display: none;
    }
}

/* Benji's third logo file (2026-10-14, "plus grand"): bigger everywhere. 48 px in the desktop bar,
   40 px on the entry page's bar, the mascot 38 px on phones and tablets. */
@media (min-width: 992px) {
    .sheep-topbar .sheep-topbar-brand img {
        height: 48px;
    }
}

@media (max-width: 991.98px) {
    html:not(.sm-has-location) body:has(.ld.ld-simple) .sheep-topbar .sheep-topbar-brand .sheep-brand-light,
    html:not(.sm-has-location)[data-theme="dark"] body:has(.ld.ld-simple) .sheep-topbar .sheep-topbar-brand .sheep-brand-dark {
        height: 40px;
    }
}

@media (max-width: 991.98px) and (min-height: 521px) {
    .sheep-topbar .sheep-topbar-brand .sheep-brand-mobile {
        height: 38px;
    }
}

/* Further left (Benji, 2026-10-14): the card 6 px from the edge, its rows closer to its sides. */
@media (min-width: 992px) {
    .sheep-sidebar {
        left: 6px;
    }

    .main-content {
        padding-left: calc(var(--sidebar-expanded) + 6px + 8px);
    }

    .sheep-side-unis {
        margin: 0 8px;
    }

    .sheep-sidebar .sheep-side-heading {
        padding-left: 18px;
    }
}

/* ---- a quieter menu (Benji, 2026-10-14) ----
   No band sliding in, no lean nor bounce on hover, no filled gradient tab on the current row.
   Hover: a faint wash of the site's colour, the chevron slides a touch to the right. Current row:
   the name in the site's colour with a 3 px mark on its left, the picture left as it is. Same in
   the phone menu; in the rail beside the map the current picture wears a thin ring instead. */
.sheep-sidebar .nav-link,
.sheep-sidebar .sheep-oc-link,
.sheep-offcanvas .sheep-oc-link {
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}

    .sheep-sidebar .nav-link::after,
    .sheep-sidebar .sheep-oc-link::after,
    .sheep-offcanvas .sheep-oc-link::after,
    .sheep-offcanvas .sheep-oc-link.active::before {
        display: none;
    }

.sheep-oc-chev {
    transition: transform .18s ease, opacity .18s ease, color .18s ease;
}

@media (hover: hover) {
    .sheep-sidebar .nav-link:hover,
    .sheep-sidebar .sheep-oc-link:hover,
    .sheep-offcanvas .sheep-oc-link:hover {
        transform: none;
        background-color: rgba(var(--sheep-accent-rgb), 0.07);
    }

        .sheep-sidebar .nav-link:hover .sheep-oc-svg,
        .sheep-sidebar .sheep-oc-link:hover .sheep-oc-svg,
        .sheep-sidebar .sheep-oc-link:hover .nav-cat-ico,
        .sheep-sidebar .sheep-oc-link:hover .sheep-oc-cat-art,
        .sheep-offcanvas .sheep-oc-link:hover .sheep-oc-svg,
        .sheep-offcanvas .sheep-oc-link:hover .nav-cat-ico,
        .sheep-offcanvas .sheep-oc-link:hover .sheep-oc-cat-art {
            transform: none;
        }

        .sheep-side-unis .sheep-oc-uni:hover .sheep-oc-chev {
            transform: translateX(3px);
            opacity: 1;
            color: var(--sheep-accent-dark);
        }
}

.sheep-sidebar .nav-link:active,
.sheep-sidebar .sheep-oc-link:active,
.sheep-offcanvas .sheep-oc-link:active {
    transform: scale(0.985);
}

.sheep-sidebar .nav-link.active,
.sheep-sidebar .nav-link[aria-current="page"],
.sheep-sidebar .sheep-oc-link.active,
.sheep-offcanvas .sheep-oc-link.active,
[data-theme="dark"] .sheep-sidebar .nav-link.active,
[data-theme="dark"] .sheep-sidebar .sheep-oc-link.active,
[data-theme="dark"] .sheep-offcanvas .sheep-oc-link.active {
    background: rgba(var(--sheep-accent-rgb), 0.08) !important;
    color: var(--sheep-accent-ink) !important;
    box-shadow: inset 3px 0 0 var(--sheep-accent) !important;
    font-weight: 750;
}

    .sheep-sidebar .nav-link.active .sheep-oc-svg,
    .sheep-sidebar .sheep-oc-link.active .sheep-oc-svg,
    .sheep-sidebar .sheep-oc-link.active .nav-cat-ico,
    .sheep-offcanvas .sheep-oc-link.active .sheep-oc-svg,
    .sheep-offcanvas .sheep-oc-link.active .nav-cat-ico {
        color: var(--sheep-accent-dark);
        animation: none;
    }

    .sheep-sidebar .sheep-oc-link.active .sheep-oc-cat-art,
    .sheep-offcanvas .sheep-oc-link.active .sheep-oc-cat-art,
    .sheep-sidebar .sheep-oc-uni.active .sheep-oc-uni-art,
    .sheep-offcanvas .sheep-oc-uni.active .sheep-oc-uni-art {
        background: transparent;
        box-shadow: none;
        animation: none;
    }

    .sheep-side-unis .sheep-oc-uni.active .sheep-oc-chev {
        opacity: 1;
        color: var(--sheep-accent-dark);
    }

@media (min-width: 992px) {
    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-uni.active {
        background: transparent !important;
        box-shadow: none !important;
    }

        :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-uni.active .sheep-oc-uni-art {
            border-radius: 50%;
            box-shadow: 0 0 0 2px var(--sheep-accent);
        }
}

/* The pale ground behind the side menu on every page, as on the home (Benji, 2026-10-14): the page
   is pale on desktop and the content of the other pages keeps its white. */
@media (min-width: 992px) {
    body {
        background: #f2f5f9;
    }

    html[data-theme="dark"] body {
        background: var(--bs-body-bg, #111a2b);
    }

    .main-content:not(.hf-host) {
        background: #fff;
    }

    html[data-theme="dark"] .main-content:not(.hf-host) {
        background: var(--bs-body-bg, #111a2b);
    }
}

/* ---- the side menu's plain rows, dressed like the category rows (Benji, 2026-10-14, no motion) ----
   "Mes commandes", "Favoris", "Voir toutes les catégories" and the Sheep-Me rows: a 40 px rounded
   badge holds the line icon (pale green for orders and the categories, pale orange for the
   favourites, light grey for Sheep-Me), the name in 0.9 rem beside it, a small chevron at the end,
   hairlines between the rows as in the category list. Current row: the badge in the glossy green
   with a white icon, the name in green, the same faint wash and 3 px mark as the categories. */
@media (min-width: 992px) {
    .sheep-sidebar .nav-link,
    .sheep-sidebar .sheep-oc-link.nav-cat-all {
        gap: 14px;
        min-height: 56px;
        margin: 0 8px;
        padding: 6px 8px 6px 10px;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--oc-text);
        background-image: linear-gradient(var(--oc-line, #e9ebee), var(--oc-line, #e9ebee));
        background-size: calc(100% - 54px) 1px;
        background-repeat: no-repeat;
        background-position: right bottom;
    }

        .sheep-sidebar .nav-item:last-child .nav-link,
        .sheep-sidebar .nav-item:has(+ .sheep-side-heading) .nav-link,
        .sheep-sidebar .nav-item:has(+ .sheep-side-cats) .nav-link,
        .sheep-sidebar .sheep-oc-link.nav-cat-all {
            background-image: none;
        }

    .sheep-sidebar .sheep-oc-link.nav-cat-all {
        margin-top: 2px;
    }

    /* The badge. */
    .sheep-sidebar .nav-link .sheep-oc-svg,
    .sheep-sidebar .sheep-oc-link.nav-cat-all .nav-cat-ico {
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        padding: 9px;
        border-radius: 12px;
        background: var(--sheep-accent-soft);
        color: var(--sheep-accent-dark);
        stroke-width: 1.9;
    }

        .sheep-sidebar .sheep-oc-link.nav-cat-all .nav-cat-ico .hf-ico {
            width: 22px;
            height: 22px;
        }

    .sheep-sidebar .nav-link[href*="favorites"] .sheep-oc-svg {
        background: var(--sheep-orange-soft);
        color: var(--sheep-orange-dark);
    }

    .sheep-sidebar .nav-link[href*="why"] .sheep-oc-svg,
    .sheep-sidebar .nav-link[href*="become-"] .sheep-oc-svg {
        background: var(--oc-active, #f5f6f7);
        color: var(--oc-muted, #686b72);
    }

    /* The name takes the room, with a small chevron at the end. */
    .sheep-sidebar .nav-link .sidebar-text,
    .sheep-sidebar .sheep-oc-link.nav-cat-all > span {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
    }

        .sheep-sidebar .nav-link .sidebar-text::after,
        .sheep-sidebar .sheep-oc-link.nav-cat-all > span::after {
            content: "";
            flex: 0 0 8px;
            width: 8px;
            height: 8px;
            margin-right: 8px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(-45deg);
            opacity: 0.45;
        }

    /* Hover: the badge a touch deeper, nothing moves. */
    .sheep-sidebar .nav-link:hover .sheep-oc-svg,
    .sheep-sidebar .sheep-oc-link.nav-cat-all:hover .nav-cat-ico {
        background: var(--sheep-accent-pale, #d3ecd7);
    }

    .sheep-sidebar .nav-link[href*="favorites"]:hover .sheep-oc-svg {
        background: rgba(var(--sheep-orange-rgb), 0.22);
    }

    .sheep-sidebar .nav-link[href*="why"]:hover .sheep-oc-svg,
    .sheep-sidebar .nav-link[href*="become-"]:hover .sheep-oc-svg {
        background: var(--oc-line, #e9ebee);
    }

    /* Current row. */
    .sheep-sidebar .nav-link.active .sheep-oc-svg,
    .sheep-sidebar .nav-link[aria-current="page"] .sheep-oc-svg,
    .sheep-sidebar .sheep-oc-link.nav-cat-all.active .nav-cat-ico {
        background: var(--sheep-grad);
        color: #fff;
        box-shadow: 0 3px 10px rgba(var(--sheep-accent-dark-rgb), 0.28);
    }

        .sheep-sidebar .sheep-oc-link.nav-cat-all.active .nav-cat-ico .hf-ico {
            color: #fff;
        }

    .sheep-sidebar .nav-link.active .sidebar-text::after,
    .sheep-sidebar .nav-link[aria-current="page"] .sidebar-text::after {
        opacity: 1;
        color: var(--sheep-accent-dark);
    }
}

/* ---- the side menu, pictures first (Benji, 2026-10-14) ----
   Everything closer to the left edge (rows 4 px from the card's sides, headings at 14 px), the
   category pictures bigger (60 px) and the names lighter and smaller, so the pictures lead. The
   picture of the row being pressed swells, and the current row keeps its picture a little bigger. */
@media (min-width: 992px) {
    .sheep-sidebar .sheep-side-heading {
        padding-left: 14px;
    }

    .sheep-sidebar .nav-link,
    .sheep-sidebar .sheep-oc-link.nav-cat-all {
        margin: 0 4px;
        padding: 6px 4px;
    }

    .sheep-side-unis {
        margin: 0 4px;
    }

        .sheep-side-unis .sheep-oc-uni {
            gap: 10px;
            min-height: 68px;
            padding: 3px 4px;
            font-size: 0.82rem;
            font-weight: 550;
            color: #4a4d52;
            background-size: calc(100% - 70px) 1px;
        }

    [data-theme="dark"] .sheep-sidebar .sheep-side-unis .sheep-oc-uni {
        color: #c6c9ce;
    }

    .sheep-sidebar .sheep-oc-link .sheep-oc-uni-art,
    .sheep-sidebar .sheep-oc-uni.active .sheep-oc-uni-art {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
        transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
    }

        .sheep-sidebar .sheep-oc-uni-art .hf-ico-art {
            width: 60px;
            height: 60px;
        }

    .sheep-sidebar .sheep-side-unis .sheep-oc-uni:active .sheep-oc-uni-art {
        transform: scale(1.2);
    }

    .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active .sheep-oc-uni-art {
        transform: scale(1.14);
    }

    .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active {
        color: var(--sheep-accent-ink) !important;
        font-weight: 700;
    }
}

/* ---- the chosen row in the colour of its picture's plinth, underlined (Benji, 2026-10-14) ----
   Each category row carries the colour of its plinth (--uni-rgb, from the markup): the chosen row
   is washed in it and underlined with it, instead of the mark on the left; a lighter wash on
   hover, the chevron in that colour. The plain rows (orders, favourites, Sheep-Me) are underlined
   in the site's colour. The rail beside the map keeps its ring. */
.sheep-side-unis .sheep-oc-uni {
    --uni-rgb: var(--sheep-accent-rgb);
}

.sheep-sidebar .sheep-side-unis .sheep-oc-uni.active,
.sheep-offcanvas .sheep-side-unis .sheep-oc-uni.active {
    background: rgba(var(--uni-rgb), 0.16) !important;
    box-shadow: inset 0 -3px 0 rgb(var(--uni-rgb)) !important;
    color: #202124 !important;
}

[data-theme="dark"] .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active,
[data-theme="dark"] .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.active {
    background: rgba(var(--uni-rgb), 0.24) !important;
    color: #fff !important;
}

    .sheep-side-unis .sheep-oc-uni.active .sheep-oc-chev {
        color: rgb(var(--uni-rgb));
        opacity: 1;
    }

@media (hover: hover) {
    .sheep-sidebar .sheep-side-unis .sheep-oc-uni:hover,
    .sheep-offcanvas .sheep-side-unis .sheep-oc-uni:hover {
        background-color: rgba(var(--uni-rgb), 0.09);
    }

        .sheep-side-unis .sheep-oc-uni:hover .sheep-oc-chev {
            color: rgb(var(--uni-rgb));
        }
}

.sheep-sidebar .nav-link.active,
.sheep-sidebar .nav-link[aria-current="page"],
.sheep-sidebar .sheep-oc-link.nav-cat-all.active,
.sheep-offcanvas .sheep-oc-link.active:not(.sheep-oc-uni) {
    box-shadow: inset 0 -3px 0 var(--sheep-accent) !important;
}

@media (min-width: 992px) {
    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active {
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* The sign-in and register pages: no delivery / pickup, address or search in the bar (Benji,
   2026-10-14), whatever the reader's position; the language and the account stay. */
body:has(.acc-login) .sheep-topbar .sheep-mode-top,
body:has(.acc-login) .sheep-topbar .sheep-topsearch,
body:has(.acc-login) .sheep-topbar .sheep-addr-btn {
    display: none !important;
}

/* Bigger category rows in the side menu (Benji, 2026-10-14): 72 px pictures on 84 px rows, the
   names a little bigger with them; the card widens to keep most names on one line. */
@media (min-width: 992px) {
    :root {
        --sidebar-expanded: 304px;
    }

    .sheep-side-unis .sheep-oc-uni {
        gap: 12px;
        min-height: 84px;
        padding: 4px 6px 4px 4px;
        font-size: 0.9rem;
        background-size: calc(100% - 82px) 1px;
    }

    .sheep-sidebar .sheep-oc-link .sheep-oc-uni-art,
    .sheep-sidebar .sheep-oc-uni.active .sheep-oc-uni-art {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

        .sheep-sidebar .sheep-oc-uni-art .hf-ico-art {
            width: 72px;
            height: 72px;
        }

    .sheep-sidebar .sheep-side-unis .sheep-oc-uni:active .sheep-oc-uni-art {
        transform: scale(1.16);
    }

    .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active .sheep-oc-uni-art {
        transform: scale(1.1);
    }
}

@media (min-width: 1280px) {
    :root {
        --sidebar-expanded: 332px;
    }
}

/* Benji (2026-10-14, later): the rows stay tall (92 px) but the pictures come back down to 56 px,
   with the names bigger beside them. */
@media (min-width: 992px) {
    .sheep-side-unis .sheep-oc-uni {
        gap: 14px;
        min-height: 92px;
        padding: 6px 6px 6px 12px;
        font-size: 1rem;
        font-weight: 600;
        background-size: calc(100% - 82px) 1px;
    }

    .sheep-sidebar .sheep-oc-link .sheep-oc-uni-art,
    .sheep-sidebar .sheep-oc-uni.active .sheep-oc-uni-art {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

        .sheep-sidebar .sheep-oc-uni-art .hf-ico {
            width: 26px;
            height: 26px;
        }
}

/* Benji (2026-10-14, later still): the category buttons a bit smaller (72 px rows, 52 px pictures,
   names at 0.92 rem) and everything further left: the card 4 px from the edge, the rows flush with
   its sides, the headings at 10 px. */
@media (min-width: 992px) {
    :root {
        --side-gap: 8px;
        --sidebar-expanded: 290px;
    }

    .sheep-sidebar {
        left: 4px;
    }

    .main-content {
        padding-left: calc(var(--sidebar-expanded) + 4px + 8px);
    }

    .sheep-sidebar .sheep-side-heading {
        padding-left: 10px;
    }

    .sheep-sidebar .nav-link,
    .sheep-sidebar .sheep-oc-link.nav-cat-all {
        margin: 0 2px;
        padding: 5px 4px 5px 2px;
    }

    .sheep-side-unis {
        margin: 0 2px;
    }

        .sheep-side-unis .sheep-oc-uni {
            gap: 12px;
            min-height: 72px;
            padding: 4px 4px 4px 6px;
            font-size: 0.92rem;
            background-size: calc(100% - 70px) 1px;
        }

    .sheep-sidebar .sheep-oc-link .sheep-oc-uni-art,
    .sheep-sidebar .sheep-oc-uni.active .sheep-oc-uni-art {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

        .sheep-sidebar .sheep-oc-uni-art .hf-ico-art {
            width: 52px;
            height: 52px;
        }
}

@media (min-width: 1280px) {
    :root {
        --sidebar-expanded: 312px;
    }
}

/* ...and the hero 16 px from the card again (measured: 32). */
@media (min-width: 992px) {
    .main-content {
        padding-left: calc(var(--sidebar-expanded) - 4px);
    }
}

/* The rail beside the map: the plain rows keep their badge centred over a small name, no chevron. */
@media (min-width: 992px) {
    :root:has(.hf.hf-map-on) .sheep-sidebar .nav-link .sidebar-text,
    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link.nav-cat-all > span {
        display: block;
        text-align: center;
    }

        :root:has(.hf.hf-map-on) .sheep-sidebar .nav-link .sidebar-text::after,
        :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link.nav-cat-all > span::after {
            display: none;
        }

    :root:has(.hf.hf-map-on) .sheep-sidebar .nav-link .sheep-oc-svg,
    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link.nav-cat-all .nav-cat-ico {
        margin: 0 auto;
    }
}

/* The logo's lettering for every title (Benji, 2026-10-14, "font"): the display font (Baloo 2) on
   the pages' headings, the feed's section and row titles, the shop's titles, the checkout's, the
   menus' and dialogs' titles. Weights and sizes stay as they are. */
.main-content h1,
.main-content h2,
.main-content .h1,
.main-content .h2,
.hf-host .hf .hf-section-head h2,
.hf-host .hf .hf-row-head h2,
.hf-empty h3,
.supplier-catalog-title,
.supplier-catalog-section-title,
.co-title,
.sheep-offcanvas .offcanvas-title,
.modal-title {
    font-family: var(--sheep-display);
}

    .hf-host .hf .hf-section-head h2 {
        font-weight: 700;
        letter-spacing: -0.02em;
    }

/* A little more air under the top bar (Benji, 2026-10-14): 14 px between the bar and the side card
   or the hero, instead of 8. */
@media (min-width: 992px) {
    :root {
        --side-gap: 14px;
    }
}

/* ---- one ground for the whole site (Benji, 2026-10-14, "un fond commun, couleur") ----
   A pale blue-grey page behind everything (a touch of blue, Eric, 2026-10-16), phones and desktop, every page: the cards, the
   menus and the forms stand on it in white. The dark theme keeps its own dark ground. */
body,
.main-content,
.main-content:not(.hf-host) {
    background: #f2f5f9;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .main-content:not(.hf-host),
[data-theme="dark"] .main-content {
    background: var(--bs-body-bg, #111a2b);
}

/* The desktop bar back to 58 px (it had grown to 64 with the 48 px logo): 5 px of padding above
   and below the logo, so the 14 px under the bar are real. */
@media (min-width: 992px) {
    .sheep-topbar {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

/* ...the home feed's page too (its earlier rule weighed more). */
body:has(.main-content.hf-host) {
    background: #f2f5f9;
}

html[data-theme="dark"] body:has(.main-content.hf-host) {
    background: var(--bs-body-bg, #111a2b);
}

/* ---- the chosen row of the side menu (Benji, 2026-10-14): a bar on its left and a little shift ----
   No underline any more: a 4 px bar on the left of the row in the colour of its plinth (the site's
   colour for the plain rows), the row slid 6 px to the right with a short ease, its wash kept light;
   the card's width does not move (the row gives the 6 px back on its right). Same in the phone menu. */
.sheep-sidebar .sheep-side-unis .sheep-oc-uni,
.sheep-offcanvas .sheep-side-unis .sheep-oc-uni,
.sheep-sidebar .nav-link,
.sheep-sidebar .sheep-oc-link.nav-cat-all {
    transition: background-color .15s ease, color .15s ease, transform .22s cubic-bezier(.22, 1, .36, 1), width .22s cubic-bezier(.22, 1, .36, 1);
}

.sheep-sidebar .sheep-side-unis .sheep-oc-uni.active,
.sheep-offcanvas .sheep-side-unis .sheep-oc-uni.active {
    background: rgba(var(--uni-rgb), 0.1) !important;
    box-shadow: inset 4px 0 0 rgb(var(--uni-rgb)) !important;
    transform: translateX(6px);
    width: calc(100% - 6px);
}

[data-theme="dark"] .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active,
[data-theme="dark"] .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.active {
    background: rgba(var(--uni-rgb), 0.18) !important;
}

.sheep-sidebar .nav-link.active,
.sheep-sidebar .nav-link[aria-current="page"],
.sheep-sidebar .sheep-oc-link.nav-cat-all.active,
.sheep-offcanvas .sheep-oc-link.active:not(.sheep-oc-uni) {
    box-shadow: inset 4px 0 0 var(--sheep-accent) !important;
    transform: translateX(6px);
    width: calc(100% - 6px);
}

.sheep-sidebar .sheep-side-unis .sheep-oc-uni.active .sheep-oc-chev,
.sheep-offcanvas .sheep-side-unis .sheep-oc-uni.active .sheep-oc-chev {
    opacity: 1;
}

@media (min-width: 992px) {
    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-uni.active {
        transform: none;
        width: auto;
        box-shadow: none !important;
    }
}

/* Benji's logo of the 14th, later: 10 % bigger everywhere (53 px in the desktop bar, 44 px on the
   entry page's bar, the mascot 42 px on phones and tablets). */
@media (min-width: 992px) {
    .sheep-topbar .sheep-topbar-brand img {
        height: 53px;
    }

    .sheep-topbar {
        padding-top: 3px;
        padding-bottom: 2px;
    }
}

@media (max-width: 991.98px) {
    html:not(.sm-has-location) body:has(.ld.ld-simple) .sheep-topbar .sheep-topbar-brand .sheep-brand-light,
    html:not(.sm-has-location)[data-theme="dark"] body:has(.ld.ld-simple) .sheep-topbar .sheep-topbar-brand .sheep-brand-dark {
        height: 44px;
    }
}

@media (max-width: 991.98px) and (min-height: 521px) {
    .sheep-topbar .sheep-topbar-brand .sheep-brand-mobile {
        height: 42px;
    }
}

/* The menu's card and the hero a little higher (Benji, 2026-10-15): 8 px under the bar. */
@media (min-width: 992px) {
    :root {
        --side-gap: 8px;
    }
}

/* Air between the bar and the picture of the chosen row (Benji, 2026-10-15): the picture sits
   midway between the bar and its label. */
@media (min-width: 992px) {
    .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active {
        padding-left: 16px;
    }

    .sheep-sidebar .nav-link.active,
    .sheep-sidebar .nav-link[aria-current="page"],
    .sheep-sidebar .sheep-oc-link.nav-cat-all.active {
        padding-left: 14px;
    }
}

/* ---- the phone menu reaches its fifteen categories (Benji, 2026-10-15) ----
   Benji saw only the first rows on his phone. The sheet now takes the dynamic viewport (the
   browser's toolbars no longer hide its end), the category rows are tighter (54 px instead of
   64, pictures unchanged). (The soft fade at the bottom went, Benji 2026-10-15: it hid the last rows.) */
@media (max-width: 991.98px) {
    @supports (height: 100dvh) {
        .offcanvas-start.sheep-offcanvas {
            height: 100dvh;
        }
    }

    .sheep-offcanvas .sheep-side-unis .sheep-oc-uni {
        min-height: 54px;
        padding: 3px 6px 3px 8px;
        gap: 12px;
    }

    .sheep-offcanvas .offcanvas-body {
        scrollbar-width: thin;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* The sign-in and register pages and the blank home page on phones keep the day / night button in
   the top bar (Benji, 2026-10-15): they have no bottom bar, where the button otherwise lives for
   visitors. */
@media (max-width: 991.98px) {
    body:has(.acc-login) .sheep-topbar .sheep-topbar-theme,
    body:has(.ld-simple.ld-no-address.ld-guest) .sheep-topbar .sheep-topbar-theme {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }
}

/* ---- the long logo whenever the top bar is empty (Benji, 2026-10-15) ----
   "As soon as there is nothing in the top bar, the long logo." On phones, every page whose bar
   drops delivery / pickup, the address and the search (the landing pages without an address,
   "Pourquoi Sheep-Me" included, and the sign-in and register pages, whatever the position) shows
   the long logo instead of the sheep alone, as the entry pages before any position already did. */
@media (max-width: 991.98px) {
    body:has(.ld.ld-no-address) .sheep-topbar .sheep-topbar-brand,
    body:has(.acc-login) .sheep-topbar .sheep-topbar-brand {
        margin-right: 8px;
    }

        body:has(.ld.ld-no-address) .sheep-topbar .sheep-topbar-brand .sheep-brand-mobile,
        body:has(.acc-login) .sheep-topbar .sheep-topbar-brand .sheep-brand-mobile {
            display: none !important;
        }

        html:not([data-theme="dark"]) body:has(.ld.ld-no-address) .sheep-topbar .sheep-topbar-brand .sheep-brand-light,
        html:not([data-theme="dark"]) body:has(.acc-login) .sheep-topbar .sheep-topbar-brand .sheep-brand-light,
        html[data-theme="dark"] body:has(.ld.ld-no-address) .sheep-topbar .sheep-topbar-brand .sheep-brand-dark,
        html[data-theme="dark"] body:has(.acc-login) .sheep-topbar .sheep-topbar-brand .sheep-brand-dark {
            display: block !important;
            width: auto;
            height: 44px;
        }

        html[data-theme="dark"] body:has(.ld.ld-no-address) .sheep-topbar .sheep-topbar-brand .sheep-brand-light,
        html[data-theme="dark"] body:has(.acc-login) .sheep-topbar .sheep-topbar-brand .sheep-brand-light {
            display: none !important;
        }
}

/* ---- the phone menu shows its fifteen categories at once (Benji, 2026-10-15) ----
   "When I open the menu I don't see all the categories": the list becomes a grid of tiles, three
   to a row, the picture above its name (as the home page's tiles), so the fifteen fit on the
   screen of an ordinary phone without scrolling; the chosen one is washed in its plinth's colour
   with a ring. The desktop side menu keeps its list. */
@media (max-width: 991.98px) {
    .sheep-offcanvas .sheep-oc-group.sheep-side-unis {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        margin: 2px 0 6px;
    }

        .sheep-offcanvas .sheep-side-unis .sheep-oc-uni {
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 3px;
            width: auto;
            min-height: 0;
            margin: 0;
            padding: 6px 2px 7px;
            border: 0;
            border-radius: 14px;
            background-image: none;
            text-align: center;
            font-size: 0.72rem;
            font-weight: 600;
            line-height: 1.18;
            transform: none;
        }

            .sheep-offcanvas .sheep-side-unis .sheep-oc-uni .sheep-oc-uni-art,
            .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.active .sheep-oc-uni-art {
                width: 50px;
                height: 50px;
                flex: 0 0 50px;
                background: transparent;
                transform: none;
            }

                .sheep-offcanvas .sheep-side-unis .sheep-oc-uni-art .hf-ico-art {
                    width: 50px;
                    height: 50px;
                }

            .sheep-offcanvas .sheep-side-unis .sheep-oc-uni-name {
                flex: 0 0 auto;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                overflow-wrap: anywhere;
                hyphens: auto;
            }

            .sheep-offcanvas .sheep-side-unis .sheep-oc-chev {
                display: none;
            }

        .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.active {
            background: rgba(var(--uni-rgb), 0.12) !important;
            box-shadow: inset 0 0 0 2px rgba(var(--uni-rgb), 0.55) !important;
            transform: none;
            width: auto;
        }

    [data-theme="dark"] .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.active {
        background: rgba(var(--uni-rgb), 0.2) !important;
    }
}

/* ---- the language in the profile menu on phones (Benji, 2026-10-15) ----
   Under the colour choice: a small "Langue" title with its globe, then the four languages written
   out, two by two, as light pills; the current one in green, as on the entry pages. */
.sheep-user-menu .sheep-user-langs {
    display: block;
    padding: 6px 14px 8px;
}

.sheep-user-menu .sheep-user-langs-title {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.75;
}

.sheep-user-menu .sheep-user-langs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.sheep-user-menu .sheep-user-lang {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 999px;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

    .sheep-user-menu .sheep-user-lang:hover,
    .sheep-user-menu .sheep-user-lang:focus-visible {
        border-color: var(--sheep-accent-line, #bfe2c5);
        color: var(--sheep-accent-ink, #08701f);
    }

    .sheep-user-menu .sheep-user-lang.active {
        border-color: var(--sheep-accent-line, #bfe2c5);
        background: var(--sheep-accent-soft, #e6f4e8);
        color: var(--sheep-accent-ink, #08701f);
    }

[data-theme="dark"] .sheep-user-menu .sheep-user-lang {
    border-color: rgba(255, 255, 255, 0.14);
}

    [data-theme="dark"] .sheep-user-menu .sheep-user-lang.active {
        border-color: rgba(var(--sheep-accent-rgb), 0.45);
        background: rgba(var(--sheep-accent-rgb), 0.18);
        color: var(--sheep-accent-light, #7ee27c);
    }

/* ---- the quiet pages: nothing in the top bar, the long logo (Benji, 2026-10-15) ----
   "On the support page, the settings, the welcome pages: no position, no delivery / pickup; better
   nothing there, so one focuses on the page, and the long logo." On phones: support, account
   settings, about and the legal pages, "Pourquoi Sheep-Me" and "Devenir commerçant", "Devenir
   livreur" and the dashboard; and the deliverers' and suppliers' spaces (their dashboards, the shop
   preview, the promotions, the transactions, the schedules, the contract; Benji, 2026-10-15). The
   search stays reachable from the bottom bar (it opens over the bar as before). */
@media (max-width: 991.98px) {
    body:has(:is(.support-page, .manage-layout, .sheep-public-page, .ld:not(.ld-simple), .deliverer-info-banner, .dashboard-app-card, .dashboard-path-section, .deliverer-dashboard-shell, .supplier-dashboard-shell, .pv-page, .promo-page, .supplier-transactions-page, .sm-work-page)) .sheep-topbar :is(.sheep-mode-top, .sheep-addr-btn, .sheep-topsearch:not(.is-open)) {
        display: none !important;
    }

    body:has(:is(.support-page, .manage-layout, .sheep-public-page, .ld:not(.ld-simple), .deliverer-info-banner, .dashboard-app-card, .dashboard-path-section, .deliverer-dashboard-shell, .supplier-dashboard-shell, .pv-page, .promo-page, .supplier-transactions-page, .sm-work-page)) .sheep-topbar .sheep-topbar-brand {
        margin-right: 8px;
    }

        body:has(:is(.support-page, .manage-layout, .sheep-public-page, .ld:not(.ld-simple), .deliverer-info-banner, .dashboard-app-card, .dashboard-path-section, .deliverer-dashboard-shell, .supplier-dashboard-shell, .pv-page, .promo-page, .supplier-transactions-page, .sm-work-page)) .sheep-topbar .sheep-topbar-brand .sheep-brand-mobile {
            display: none !important;
        }

        html:not([data-theme="dark"]) body:has(:is(.support-page, .manage-layout, .sheep-public-page, .ld:not(.ld-simple), .deliverer-info-banner, .dashboard-app-card, .dashboard-path-section, .deliverer-dashboard-shell, .supplier-dashboard-shell, .pv-page, .promo-page, .supplier-transactions-page, .sm-work-page)) .sheep-topbar .sheep-topbar-brand .sheep-brand-light,
        html[data-theme="dark"] body:has(:is(.support-page, .manage-layout, .sheep-public-page, .ld:not(.ld-simple), .deliverer-info-banner, .dashboard-app-card, .dashboard-path-section, .deliverer-dashboard-shell, .supplier-dashboard-shell, .pv-page, .promo-page, .supplier-transactions-page, .sm-work-page)) .sheep-topbar .sheep-topbar-brand .sheep-brand-dark {
            display: block !important;
            width: auto;
            height: 44px;
        }

        html[data-theme="dark"] body:has(:is(.support-page, .manage-layout, .sheep-public-page, .ld:not(.ld-simple), .deliverer-info-banner, .dashboard-app-card, .dashboard-path-section, .deliverer-dashboard-shell, .supplier-dashboard-shell, .pv-page, .promo-page, .supplier-transactions-page, .sm-work-page)) .sheep-topbar .sheep-topbar-brand .sheep-brand-light {
            display: none !important;
        }
}

/* ---- the phone menu shows its categories even before any position (Benji, 2026-10-15) ----
   "When I open the menu I still don't see the categories": without a saved position the menu hid
   them (nav-needs-location). They stay now; a category chosen before an address leads to the
   address step first, as the home page does. */
@media (max-width: 991.98px) {
    html:not(.sm-has-location) .sheep-offcanvas .nav-needs-location {
        display: block !important;
    }

    html:not(.sm-has-location) .sheep-offcanvas .sheep-oc-link.nav-cat-all {
        display: flex !important;
    }
}

/* ---- the basket without the categories on desktop (Benji, 2026-10-15) ----
   "On my empty basket I see all the categories, they should not be there": the basket and the
   checkout drop the side menu, as the sign-in page, and the content centres in the page. */
@media (min-width: 992px) {
    body:has(:is(.co-empty, .co-page)) .sheep-sidebar {
        display: none !important;
    }

    body:has(:is(.co-empty, .co-page)) .main-content {
        padding-left: 0 !important;
    }
}

/* ---- the titles easier to read (Benji, 2026-10-15) ----
   "The main title is too heavy, sometimes hard to read: a little bigger and less bold." Fredoka is
   loaded in 600 and 700 only, so the 800 / 900 asked everywhere came out as a smeared fake bold,
   and the letters were drawn together (down to -2.3 px). Every title in the logo's lettering now
   takes Fredoka's real semibold (600), with its own spacing; the page's main title grows by about
   8 % (the sizes below are the measured ones x 1.08, from phones to desktop). */
:is(.main-content h1, .main-content h2, .main-content .h1, .main-content .h2, .hf-host .hf .hf-section-head h2,
    .hf-host .hf .hf-row-head h2, .hf-empty h3, .supplier-catalog-title, .supplier-catalog-section-title, .co-title,
    .co-empty-title, .sheep-page-title, .sheep-public-page h1, .sheep-public-page h2, .account-scope h1,
    .account-scope h2, .account-scope h3, .account-scope h4, .ld-entry-title, .ld .ld-hv-card .ld-title,
    .ld .ld-app-title, .ld-entry-modes-title, .ld-h2, .hf-catpage .hf-catpage-head h1, .item-config-head h3,
    .modal-title, .sheep-offcanvas .offcanvas-title, .hf-host .hf .hf-hero-title, .hf-host .hf .hf-hero-title em) {
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    font-synthesis: none;
}

.ld-entry-title {
    font-size: clamp(35.4px, 27.9px + 1.92vw, 52.5px) !important;
}

.support-page h1 {
    font-size: clamp(34.6px, 25.5px + 2.33vw, 55.3px) !important;
}

.sheep-public-page h1 {
    font-size: clamp(30.1px, 24.4px + 1.47vw, 43.2px) !important;
}

.hf-catpage .hf-catpage-head h1 {
    font-size: clamp(32.8px, 26.4px + 1.65vw, 47.5px) !important;
}

.hf-host .hf .hf-section-head h2 {
    font-size: clamp(26.8px, 25.3px + 0.38vw, 30.2px) !important;
}

.co-empty-title {
    font-size: 26px !important;
}

.hf-host .hf .hf-hero-title {
    font-size: clamp(21.5px, 14.8px + 1.71vw, 36.7px) !important;
}

/* ---- "Devenir livreur": the stacked logo at the head of the green hero (Benji, 2026-10-15) ----
   As on the merchants' page: above the small title, centred on phones, beside the text's left edge
   on wider screens, with a soft shadow on the green. */
.deliverer-info-logo {
    display: block;
    width: 170px;
    height: auto;
    margin: 0 0 16px;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
}

@media (max-width: 991.98px) {
    .deliverer-info-logo {
        width: 140px;
        margin: 0 auto 14px;
    }
}

/* ---- "Tout" at the head of the phone menu's categories (Benji, 2026-10-15) ----
   A full-width row after the fifteen tiles (moved last the same day): the home's grid icon in a small rounded square, then
   "Tout". Lit (the site's wash and ring, the square in the button gradient with a white grid)
   while the home shows every category. */
@media (max-width: 991.98px) {
    .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.sheep-oc-all {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        min-height: 46px;
        padding: 5px 10px;
        font-size: 0.86rem;
        font-weight: 700;
    }

    .sheep-offcanvas .sheep-oc-all-art {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 11px;
        background: rgba(var(--sheep-accent-rgb), 0.1);
        color: var(--sheep-accent-dark);
    }

        .sheep-offcanvas .sheep-oc-all-art svg {
            width: 18px;
            height: 18px;
        }

    .sheep-offcanvas .sheep-oc-uni.sheep-oc-all.active .sheep-oc-all-art {
        background: var(--sheep-grad);
        color: #fff;
        box-shadow: 0 4px 10px rgba(var(--sheep-accent-rgb), 0.3);
    }
}

/* ---- the profile menu pinned to the right edge on phones and tablets (Benji, 2026-10-15) ----
   "When I open the profile menu it is shifted left; it must stay fixed on the right": Bootstrap
   lines it up with the profile button, and the basket pill (or another button) can sit to its
   right. The menu now hangs from the top bar itself: its right edge 10 px from the screen's,
   just under the bar, whatever stands beside the button. */
@media (max-width: 991.98px) {
    .sheep-topbar .sheep-user-dropdown {
        position: static;
    }

        .sheep-topbar .sheep-user-dropdown > .dropdown-menu,
        .sheep-topbar .sheep-user-dropdown > .dropdown-menu[data-bs-popper] {
            position: absolute;
            top: calc(100% + 4px);
            right: 10px;
            left: auto;
            margin: 0;
            transform: none;
        }
}

/* ---- the buttons' gradients softer at night (Benji, 2026-10-15) ----
   "In night mode the gradient buttons should be less bright, the contrast tires the eyes": on the
   dark ground the gradients take quieter, slightly deeper tones of the same green and orange (white
   words keep their contrast), and the coloured glow under the buttons becomes a plain soft shadow. */
[data-theme="dark"] {
    --sheep-grad: linear-gradient(180deg, #1a9524 0%, #108c26 55%, #068125 100%);
    --sheep-grad-hover: linear-gradient(180deg, #168b20 0%, #0c8223 55%, #04761f 100%);
    --sheep-grad-deep: linear-gradient(180deg, #1a9524 0%, #0c8223 100%);
    --sheep-grad-second: linear-gradient(180deg, #d18d45 0%, #c3773a 50%, #b0612f 100%);
    --sheep-grad-second-hover: linear-gradient(180deg, #c8843f 0%, #b86d33 50%, #a45829 100%);
}

[data-accent="orange"][data-theme="dark"],
[data-accent="orange"][data-theme="dark"] [data-theme],
[data-accent="orange"] [data-theme="dark"] {
    --sheep-grad: linear-gradient(180deg, #d18d45 0%, #c3773a 50%, #b0612f 100%);
    --sheep-grad-hover: linear-gradient(180deg, #c8843f 0%, #b86d33 50%, #a45829 100%);
    --sheep-grad-deep: linear-gradient(180deg, #d18d45 0%, #b86d33 100%);
    --sheep-grad-second: linear-gradient(180deg, #1a9524 0%, #108c26 55%, #068125 100%);
    --sheep-grad-second-hover: linear-gradient(180deg, #168b20 0%, #0c8223 55%, #04761f 100%);
}

[data-theme="dark"] :is(.btn-sheep-green, .sheep-btn-cta, .btn-sheep-orange, .btn-primary, .ld .ld-go, .ld-entry-gps,
    .hf-host .hf .hf-hero-cta, .sheep-topbar .sheep-mode-top .sheep-mode-btn.active, .sheep-mode-switch-top,
    .hf-host .hf .hf-mode-btn.active, .ld-entry-mode.active, .sheep-offcanvas .sheep-oc-close,
    .account-scope .nav-pills .nav-link.active):is(*, :hover, :focus-visible) {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32) !important;
}

[data-theme="dark"] :is(.hf-host .hf .hf-tile.hf-tile-all.active .hf-tile-art,
    .sheep-offcanvas .sheep-oc-uni.sheep-oc-all.active .sheep-oc-all-art,
    .sheep-sidebar .nav-link.active .sheep-oc-svg, .sheep-sidebar .nav-link[aria-current="page"] .sheep-oc-svg) {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ---- the shop's categories bar, pinned right under the top bar (Benji, 2026-10-15) ----
   "On a shop, scrolling down, the categories stay but not stuck at the top, and see-through": the
   bar now sticks flush under the top bar, on the page's own solid ground (no fade), with a hairline
   under it; on phones and tablets it spans the whole width. */
.main-content .supplier-category-tabs-wrap {
    background: #f2f5f9 !important;
    box-shadow: 0 1px 0 var(--sheep-line, #e9ebee);
}

[data-theme="dark"] .main-content .supplier-category-tabs-wrap {
    background: #111a2b !important;
    box-shadow: 0 1px 0 rgba(148, 163, 184, 0.18);
}

@media (max-width: 991.98px) {
    .main-content .supplier-category-tabs-wrap {
        top: var(--navbar-height, 56px) !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 8px 16px 8px !important;
    }
}

/* ---- the shop's description: two lines, the third fading, "Voir plus" (Benji, 2026-10-15) ----
   Closed, the text shows three lines and the third fades away (a mask, so it works on any ground);
   "Voir plus" under it opens the whole text and becomes "Voir moins". A text of two lines or less
   shows whole, without the button (site.js measures it). */
.supplier-catalog-desc-wrap .sc-desc-more,
.supplier-catalog-desc-wrap .sc-less {
    display: none;
}

.supplier-catalog-desc-wrap.is-long .sc-desc-more {
    display: inline-flex;
    cursor: pointer;
}

.supplier-catalog-desc-wrap.is-long .sc-desc-check:not(:checked) ~ .supplier-catalog-description {
    max-height: calc(3 * 1.55em);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.55em), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 1.55em), transparent 100%);
}

.supplier-catalog-desc-wrap .sc-desc-check:checked ~ .sc-desc-more .sc-more {
    display: none;
}

.supplier-catalog-desc-wrap .sc-desc-check:checked ~ .sc-desc-more .sc-less {
    display: inline;
}

.supplier-catalog-desc-wrap .sc-desc-check:focus-visible ~ .sc-desc-more {
    outline: 2px solid var(--sheep-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- the profile menu: day / night above the colour, and it scrolls when tall (Benji, 2026-10-15) ----
   The day / night item shows the words for the other theme. The menu never runs past the screen:
   it stops above the phone's bottom bar (or the screen's foot) and scrolls inside, without a
   visible scrollbar. */
.sheep-user-menu .sheep-theme-to-light {
    display: none;
}

html[data-theme="dark"] .sheep-user-menu .sheep-theme-to-dark {
    display: none;
}

html[data-theme="dark"] .sheep-user-menu span.sheep-theme-to-light {
    display: inline;
}

html[data-theme="dark"] .sheep-user-menu i.sheep-theme-to-light {
    display: inline-block;
}

.sheep-topbar .sheep-user-menu {
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .sheep-topbar .sheep-user-menu::-webkit-scrollbar {
        display: none;
    }

@media (max-width: 991.98px) {
    .sheep-topbar .sheep-user-menu {
        max-height: calc(100vh - 170px - env(safe-area-inset-bottom));
        max-height: calc(100dvh - 170px - env(safe-area-inset-bottom));
    }
}

/* ---- the merchant's dashboard: "Promotions" then "Modifier le menu" first (Benji, 2026-10-15) ----
   On phones the two lead the row, each across the whole width, the menu right under the
   promotions; the other buttons follow as before. */
@media (max-width: 767.98px) {
    .supplier-dashboard-shell .supplier-dash-promo-btn,
    .supplier-dashboard-shell .supplier-dash-menu-btn {
        flex: 1 1 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-top: .55rem;
        padding-bottom: .55rem;
        font-size: .95rem;
    }
}

/* The promotions button in the second colour (orange on the green site), as the promotions are
   everywhere; it stands apart from "Modifier le menu" under it (Benji, 2026-10-15). */
.supplier-dashboard-shell .supplier-dash-promo-btn {
    border-color: transparent;
    background: var(--sheep-grad-second);
    color: #fff;
}

    .supplier-dashboard-shell .supplier-dash-promo-btn:hover,
    .supplier-dashboard-shell .supplier-dash-promo-btn:focus-visible {
        background: var(--sheep-grad-second-hover);
        color: #fff;
    }

/* ---- the side menu beside the map (Benji, 2026-10-15) ----
   Each category shows its name under its picture, as "Mes commandes" and "Favoris" do; the chosen
   one is the same rounded square as the hover, washed and ringed in its own plinth's colour,
   instead of a green circle round its picture. */
@media (min-width: 992px) {
    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-side-unis .sheep-oc-uni {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 0;
        margin: 1px 2px;
        padding: 6px 3px 6px;
        border-radius: 12px;
        text-align: center;
    }

        :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-side-unis .sheep-oc-uni > span.sheep-oc-uni-name {
            display: -webkit-box;
            max-width: 100%;
            overflow: hidden;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow-wrap: anywhere;
            font-size: 0.6rem;
            font-weight: 600;
            line-height: 1.15;
        }

        :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-side-unis .sheep-oc-uni:hover {
            background-color: rgba(var(--uni-rgb), 0.09);
        }

    :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active {
        background: rgba(var(--uni-rgb), 0.14) !important;
        box-shadow: inset 0 0 0 2px rgba(var(--uni-rgb), 0.55) !important;
        transform: none;
        width: auto;
        padding-left: 3px;
    }

    [data-theme="dark"]:root:has(.hf.hf-map-on) .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active,
    :root:has(.hf.hf-map-on) [data-theme="dark"] .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active {
        background: rgba(var(--uni-rgb), 0.22) !important;
    }

        :root:has(.hf.hf-map-on) .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active .sheep-oc-uni-art {
            border-radius: 0;
            box-shadow: none;
        }

    /* the categories' tiles beside the map, smaller (Benji, 2026-10-15: "too big") */
    .hf-host .hf.hf-map-on .hf-tile {
        width: 78px;
    }

    .hf-host .hf.hf-map-on .hf-tile-art {
        width: 70px;
        height: 68px;
        border-radius: 18px;
    }

    .hf-host .hf.hf-map-on .hf-tile .hf-ico-art {
        width: 60px;
        height: 60px;
    }

    .hf-host .hf.hf-map-on .hf-tile-all .hf-ico:not(.hf-ico-art) {
        width: 26px;
        height: 26px;
    }

    .hf-host .hf.hf-map-on .hf-tile-label {
        max-width: 80px;
        font-size: 0.7rem;
        line-height: 1.2;
    }
}

/* ---- the green buttons (Benji, 2026-10-15) ----
   First made softer ("too aggressive"), then the same evening set to the logo's green ("change the
   green to our Sheep-Me logo's"): #1a9524 > #108c26 > #068125, the top, middle and bottom of the
   logo's lettering; white words keep their contrast. Also the green second colour of the orange
   site. Every other green of the site moved to the same hue (accent #0f8b27, dark #068125, ink
   #08701f, soft #e6f4e8; at night #45bf55, light #86d48f). */
:root:not([data-theme="dark"]):not([data-accent="orange"]) {
    --sheep-grad: linear-gradient(180deg, #1a9524 0%, #108c26 55%, #068125 100%);
    --sheep-grad-hover: linear-gradient(180deg, #168b20 0%, #0c8223 55%, #04761f 100%);
    --sheep-grad-deep: linear-gradient(180deg, #1a9524 0%, #0c8223 100%);
}

[data-accent="orange"]:not([data-theme="dark"]),
[data-accent="orange"]:not([data-theme="dark"]) [data-theme="light"] {
    --sheep-grad-second: linear-gradient(180deg, #1a9524 0%, #108c26 55%, #068125 100%);
    --sheep-grad-second-hover: linear-gradient(180deg, #168b20 0%, #0c8223 55%, #04761f 100%);
}

/* ---- the side menu's scrollbar beside the map, in the site's colours (Benji, 2026-10-15) ----
   "Not that big dark thing": a thin rounded bar in the site's green on a clear track (pale on the
   night theme), the same in every browser. */
:root:has(.hf.hf-map-on) .sheep-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--sheep-accent-rgb), 0.45) transparent;
}

[data-theme="dark"]:root:has(.hf.hf-map-on) .sheep-sidebar,
:root:has(.hf.hf-map-on) [data-theme="dark"] .sheep-sidebar {
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

@supports not (scrollbar-color: auto) {
    :root:has(.hf.hf-map-on) .sheep-sidebar::-webkit-scrollbar {
        width: 6px;
    }

    :root:has(.hf.hf-map-on) .sheep-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    :root:has(.hf.hf-map-on) .sheep-sidebar::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(var(--sheep-accent-rgb), 0.45);
    }
}

/* ---- the desktop side menu as Benji's model (2026-10-15: "too spaced, smaller, like this") ----
   Outside the map: tight rows of 60 px, the big picture (56 px) almost filling them, the name in a
   regular weight on a single line, the hairline from the name to the chevron. The card narrows to
   288 / 300 px; "Mes commandes" and "Favoris" tighten with it. The chosen row keeps its bar and wash. */
@media (min-width: 992px) {
    html:not(:has(.hf.hf-map-on)) {
        --sidebar-expanded: 288px;
    }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni {
        gap: 12px;
        min-height: 60px;
        padding: 2px 4px 2px 4px;
        font-size: 0.86rem;
        font-weight: 500;
        background-size: calc(100% - 72px) 1px;
    }

        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni .sheep-oc-uni-name {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni .sheep-oc-uni-art,
        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active .sheep-oc-uni-art,
        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni-art .hf-ico-art {
            width: 56px;
            height: 56px;
            flex-basis: 56px;
        }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active {
        padding-left: 12px;
        font-weight: 600;
    }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link,
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link:not(.sheep-oc-uni) {
        min-height: 46px;
        padding-top: 4px;
        padding-bottom: 4px;
        font-size: 0.88rem;
    }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-heading {
        margin-top: 8px;
        margin-bottom: 2px;
    }
}

@media (min-width: 1280px) {
    html:not(:has(.hf.hf-map-on)) {
        --sidebar-expanded: 300px;
    }
}

/* The chevron at the end of each category row, as on the model. */
@media (min-width: 992px) {
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni .sheep-oc-chev {
        display: block;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin-left: auto;
        opacity: 0.55;
    }
}

/* With the names on one line, the categories' block must not grow past the menu card. */
@media (min-width: 992px) {
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-cats,
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-cats {
        width: 100%;
    }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni {
        min-width: 0;
    }
}

/* The two long names ("Électronique & informatique", "Seconde main & reconditionné") take a second
   line inside the 60 px row rather than being cut. */
@media (min-width: 992px) {
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni .sheep-oc-uni-name {
        display: -webkit-box;
        white-space: normal;
        text-overflow: clip;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.2;
    }
}

/* ---- the desktop side menu 20 % smaller (Benji, 2026-10-15) ----
   Outside the map: 240 / 232 px wide (was 300 / 288), rows of 48 px with 44 px pictures, the names a
   little smaller; "Mes commandes" and "Favoris" follow. */
@media (min-width: 992px) {
    html:not(:has(.hf.hf-map-on)) {
        --sidebar-expanded: 232px;
    }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni {
        gap: 9px;
        min-height: 48px;
        padding: 2px 3px 2px 3px;
        font-size: 0.78rem;
        background-size: calc(100% - 56px) 1px;
    }

        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni .sheep-oc-uni-art,
        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active .sheep-oc-uni-art,
        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni-art .hf-ico-art {
            width: 44px;
            height: 44px;
            flex-basis: 44px;
        }

        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni .sheep-oc-chev {
            flex-basis: 13px;
            width: 13px;
            height: 13px;
        }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active {
        padding-left: 10px;
    }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link,
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link:not(.sheep-oc-uni) {
        min-height: 38px;
        padding-top: 3px;
        padding-bottom: 3px;
        font-size: 0.8rem;
    }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-heading {
        font-size: 0.68rem;
    }
}

@media (min-width: 1280px) {
    html:not(:has(.hf.hf-map-on)) {
        --sidebar-expanded: 240px;
    }
}

/* ---- the dashboard's welcome banner follows the site's colour, and is quiet at night (Benji, 2026-10-15) ----
   It used the logo's green: a loud bright green at night (that green lightens for dark backgrounds)
   and green on the orange site too. Now: the site's own colour (green, or orange on the orange
   site), from its deep tone to its ink; at night a navy card washed with that colour and ringed by
   it. The white second button becomes the site's colour on a dark ground at night. */
.dashboard-page .dashboard-top-hero {
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(135deg, rgb(var(--sheep-accent-dark-rgb)) 0%, rgb(var(--sheep-accent-ink-rgb)) 100%);
    box-shadow: 0 16px 40px rgba(var(--sheep-accent-dark-rgb), 0.2);
}

.dashboard-page .btn-dashboard-secondary,
.dashboard-page .btn-dashboard-secondary:hover {
    color: var(--sheep-accent-ink);
}

[data-theme="dark"] .dashboard-page .dashboard-top-hero {
    border: 1px solid rgba(var(--sheep-accent-rgb), 0.3);
    background: radial-gradient(circle at top right, rgba(var(--sheep-accent-rgb), 0.16), transparent 40%),
        linear-gradient(135deg, rgba(var(--sheep-accent-rgb), 0.2) 0%, rgba(var(--sheep-accent-rgb), 0.07) 100%), #1b2742;
    box-shadow: none;
}

[data-theme="dark"] .dashboard-page .btn-dashboard-secondary {
    border-color: rgba(var(--sheep-accent-rgb), 0.45);
    background: rgba(255, 255, 255, 0.06);
    color: var(--sheep-accent-ink);
}

    [data-theme="dark"] .dashboard-page .btn-dashboard-secondary:hover {
        border-color: rgba(var(--sheep-accent-rgb), 0.7);
        background: rgba(var(--sheep-accent-rgb), 0.14);
        color: var(--sheep-accent-ink);
    }

/* ---- the long logo back to its former width (Benji, 2026-10-15: "too big") ----
   The new long logo is longer (800 x 154): at the same height it ran wider. 46 px high in the
   desktop bar (about 238 px wide, as before), 38 px on the phones' quiet pages. */
@media (min-width: 992px) {
    .sheep-topbar .sheep-topbar-brand img {
        height: 46px;
    }
}

@media (max-width: 991.98px) {
    .sheep-topbar .sheep-topbar-brand img.sheep-brand-light,
    .sheep-topbar .sheep-topbar-brand img.sheep-brand-dark {
        height: 38px !important;
    }
}

/* ---- the phone menu reaches the bottom of the screen, behind the bottom bar (Benji, 2026-10-15) ----
   First the sheet stopped above the bar with a rounded corner ("not pretty"); now it runs down to
   the bottom of the screen and the bar stays in front of it (and of its shade), so the bar keeps
   its look and stays usable. The sheet's contents end above the bar (its 56 px, the raised round
   button and the safe area), so its last links can still be scrolled into view. */
@media (max-width: 991.98px) {
    body:not(:has(.acc-login)):not(:has(.ld-simple.ld-no-address.ld-guest)):not(:has(.otr-focus)) .offcanvas-start.sheep-offcanvas {
        top: 0;
        bottom: 0;
        height: auto !important;
        border-bottom-right-radius: 0;
    }

        body:not(:has(.acc-login)):not(:has(.ld-simple.ld-no-address.ld-guest)):not(:has(.otr-focus)) .offcanvas-start.sheep-offcanvas .offcanvas-body {
            padding-bottom: calc(84px + env(safe-area-inset-bottom));
        }

    body:not(:has(.acc-login)):not(:has(.ld-simple.ld-no-address.ld-guest)):not(:has(.otr-focus)) .sheep-bottom-nav {
        z-index: 1046;
    }
}

/* ---- desktop side menu: categories 10 % bigger, the other buttons in step and calmer (Benji, 2026-10-15) ----
   Categories: 53 px rows, 48 px pictures, the names a touch bigger; the card 264 / 255 px.
   "Mes commandes", "Favoris", "Voir les catégories" and the Sheep-Me links take the categories'
   left edge and regular weight, a 36 px soft square for their icon; chosen, they keep a thin bar
   and a light wash, without the slide nor the filled square. */
@media (min-width: 992px) {
    html:not(:has(.hf.hf-map-on)) {
        --sidebar-expanded: 255px;
    }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni {
        min-height: 53px;
        gap: 10px;
        font-size: 0.86rem;
        background-size: calc(100% - 60px) 1px;
    }

        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni .sheep-oc-uni-art,
        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active .sheep-oc-uni-art,
        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni-art .hf-ico-art {
            width: 48px;
            height: 48px;
            flex-basis: 48px;
        }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link,
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link:not(.sheep-oc-uni) {
        gap: 10px;
        margin-left: 6px;
        margin-right: 6px;
        padding-left: 6px;
        font-size: 0.86rem;
        font-weight: 500;
        transform: none !important;
    }

        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link .sheep-oc-svg,
        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link:not(.sheep-oc-uni) .nav-cat-ico {
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            box-shadow: none !important;
        }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link.active,
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link[aria-current="page"],
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link.nav-cat-all.active {
        width: auto;
        padding-left: 10px;
        background: rgba(var(--sheep-accent-rgb), 0.08) !important;
        box-shadow: inset 3px 0 0 rgba(var(--sheep-accent-rgb), 0.8) !important;
        font-weight: 600;
    }

        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link.active .sheep-oc-svg,
        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link[aria-current="page"] .sheep-oc-svg {
            background: rgba(var(--sheep-accent-rgb), 0.16) !important;
            color: var(--sheep-accent-dark) !important;
        }
}

@media (min-width: 1280px) {
    html:not(:has(.hf.hf-map-on)) {
        --sidebar-expanded: 264px;
    }
}

/* ---- the phone menu quieter when it opens (Benji, 2026-10-15: "too insistent") ----
   The close button is a plain light circle, not a green gradient; the shade behind the sheet is
   lighter. */
@media (max-width: 991.98px) {
    .sheep-offcanvas .sheep-oc-close,
    [data-theme="dark"] .sheep-offcanvas .sheep-oc-close {
        width: 38px;
        height: 38px;
        border: 1px solid var(--oc-line, #e9ebee);
        background: var(--oc-hover, #f5f6f7);
        color: var(--oc-text, #202124);
        box-shadow: none;
    }

        .sheep-offcanvas .sheep-oc-close:hover,
        [data-theme="dark"] .sheep-offcanvas .sheep-oc-close:hover {
            background: var(--oc-line, #e9ebee);
        }

    .offcanvas-backdrop.show {
        opacity: 0.3;
    }
}

/* ---- the left menu's chosen button in the "Tout" style (Benji, 2026-10-15: "I prefer this style
   for the left menu's buttons, but not centred") ----
   Chosen, a button is a light wash of the site's colour inside a rounded ring of that colour, its
   icon in a small square of the button gradient with the icon white; the contents stay on the left.
   A chosen category keeps its own colour for the wash and ring (its picture has no square). Phones
   and the desktop side menu alike; beside the map the desktop menu keeps its picture squares. */
@media (max-width: 991.98px) {
    .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.sheep-oc-all {
        justify-content: flex-start;
        padding-left: 12px;
    }

    .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.sheep-oc-all.active,
    .sheep-offcanvas .sheep-oc-link.active:not(.sheep-oc-uni) {
        background: rgba(var(--sheep-accent-rgb), 0.12) !important;
        color: var(--sheep-accent-ink) !important;
        box-shadow: inset 0 0 0 2px rgba(var(--sheep-accent-rgb), 0.5) !important;
        border-radius: 16px;
        transform: none;
        width: auto;
        font-weight: 700;
    }

    [data-theme="dark"] .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.sheep-oc-all.active,
    [data-theme="dark"] .sheep-offcanvas .sheep-oc-link.active:not(.sheep-oc-uni) {
        background: rgba(var(--sheep-accent-rgb), 0.2) !important;
        color: #fff !important;
    }

    .sheep-offcanvas .sheep-oc-link.active:not(.sheep-oc-uni)::before {
        display: none;
    }

    .sheep-offcanvas .sheep-oc-uni.sheep-oc-all.active .sheep-oc-all-art,
    .sheep-offcanvas .sheep-oc-link.active:not(.sheep-oc-uni) .sheep-oc-svg,
    .sheep-offcanvas .sheep-oc-link.active:not(.sheep-oc-uni) .nav-cat-ico {
        background: var(--sheep-grad) !important;
        color: #fff !important;
        box-shadow: 0 4px 10px rgba(var(--sheep-accent-rgb), 0.3) !important;
    }
}

@media (min-width: 992px) {
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link.active,
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link[aria-current="page"],
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link.nav-cat-all.active {
        background: rgba(var(--sheep-accent-rgb), 0.12) !important;
        color: var(--sheep-accent-ink) !important;
        box-shadow: inset 0 0 0 2px rgba(var(--sheep-accent-rgb), 0.5) !important;
        border-radius: 14px;
        font-weight: 650;
    }

    html[data-theme="dark"]:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link.active,
    html[data-theme="dark"]:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link[aria-current="page"],
    html[data-theme="dark"]:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link.nav-cat-all.active {
        background: rgba(var(--sheep-accent-rgb), 0.2) !important;
        color: #fff !important;
    }

        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link.active .sheep-oc-svg,
        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link[aria-current="page"] .sheep-oc-svg,
        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link.nav-cat-all.active .nav-cat-ico {
            background: var(--sheep-grad) !important;
            color: #fff !important;
            box-shadow: 0 4px 10px rgba(var(--sheep-accent-rgb), 0.3) !important;
        }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active {
        background: rgba(var(--uni-rgb), 0.12) !important;
        box-shadow: inset 0 0 0 2px rgba(var(--uni-rgb), 0.5) !important;
        border-radius: 14px;
        background-image: none;
        transform: none;
        width: auto;
        padding-left: 6px;
        font-weight: 650;
    }

    html[data-theme="dark"]:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active {
        background: rgba(var(--uni-rgb), 0.2) !important;
    }
}

/* ---- the phone menu's buttons all built like "Tout" (Benji, 2026-10-15: "check the other buttons,
   Accueil, Pourquoi Sheep-Me...") ----
   Accueil, Favoris, Mes commandes, Voir les catégories and the Sheep-Me links take the "Tout" row's
   shape: 46 px rows, contents on the left, the icon in a 34 px rounded square of the site's colour
   (a light tint at rest, the button gradient with a white icon once chosen), the name beside it. */
@media (max-width: 991.98px) {
    .sheep-offcanvas .sheep-oc-link:not(.sheep-oc-uni),
    .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.sheep-oc-all {
        gap: 10px;
        min-height: 46px;
        padding: 5px 10px 5px 12px;
        border-radius: 16px;
        font-size: 0.86rem;
        font-weight: 600;
    }

        .sheep-offcanvas .sheep-oc-link:not(.sheep-oc-uni) .sheep-oc-svg,
        .sheep-offcanvas .sheep-oc-link:not(.sheep-oc-uni) .nav-cat-ico {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            padding: 8px;
            border-radius: 11px;
            background: rgba(var(--sheep-accent-rgb), 0.1);
            color: var(--sheep-accent-dark);
            animation: none;
        }

            .sheep-offcanvas .sheep-oc-link:not(.sheep-oc-uni) .nav-cat-ico {
                padding: 0;
            }

                .sheep-offcanvas .sheep-oc-link:not(.sheep-oc-uni) .nav-cat-ico svg {
                    width: 18px;
                    height: 18px;
                }

    [data-theme="dark"] .sheep-offcanvas .sheep-oc-link:not(.sheep-oc-uni) .sheep-oc-svg,
    [data-theme="dark"] .sheep-offcanvas .sheep-oc-link:not(.sheep-oc-uni) .nav-cat-ico,
    [data-theme="dark"] .sheep-offcanvas .sheep-oc-uni.sheep-oc-all .sheep-oc-all-art {
        background: rgba(var(--sheep-accent-rgb), 0.16);
        color: var(--sheep-accent);
    }

    .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.sheep-oc-all.active,
    .sheep-offcanvas .sheep-oc-link.active:not(.sheep-oc-uni) {
        font-weight: 700;
    }

    [data-theme="dark"] .sheep-offcanvas .sheep-oc-uni.sheep-oc-all.active .sheep-oc-all-art,
    [data-theme="dark"] .sheep-offcanvas .sheep-oc-link.active:not(.sheep-oc-uni) .sheep-oc-svg,
    [data-theme="dark"] .sheep-offcanvas .sheep-oc-link.active:not(.sheep-oc-uni) .nav-cat-ico {
        background: var(--sheep-grad) !important;
        color: #fff !important;
    }
}

/* ---- the small mascot alone in the top bar 10 % smaller (Benji, 2026-10-15) ----
   Phones and tablets: 38 px high (was 42), 29 px when the phone lies on its side (was 32). */
@media (max-width: 991.98px) and (min-height: 521px) {
    .sheep-topbar .sheep-topbar-brand .sheep-brand-mobile {
        height: 38px;
    }
}

@media (max-width: 991.98px) and (max-height: 520px) {
    .sheep-topbar .sheep-topbar-brand .sheep-brand-mobile {
        height: 29px;
    }
}

/* ---- the orange washes at night (Benji, 2026-10-15: "the orange backgrounds in dark mode are not
   pretty") ----
   A light wash of orange laid over the night's navy turns brown. At night the orange keeps to the
   rings, icons and words, and the surface behind them is a lighter navy: the soft orange colours
   become that navy (the demo note, and on the orange site every soft surface), and the
   places that mix the orange themselves follow. The chosen category at night: the lighter navy inside
   a ring of its colour, for every category. Green keeps its washes, which stay clean on the navy. */
[data-theme="dark"] {
    --sheep-orange-soft: rgba(255, 255, 255, 0.07);
}

[data-accent="orange"][data-theme="dark"],
[data-accent="orange"][data-theme="dark"] [data-theme],
[data-accent="orange"] [data-theme="dark"] {
    --sheep-accent-soft: rgba(255, 255, 255, 0.07);
    --sheep-accent-pale: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .hf-demo-note {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(245, 160, 77, 0.4);
}

    html[data-theme="dark"] .hf-demo-note i {
        color: #f5a04d;
    }

html[data-theme="dark"] .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.active:not(.sheep-oc-all),
html[data-theme="dark"]:root:has(.hf.hf-map-on) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active,
html[data-theme="dark"]:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni.active {
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 0 0 2px rgba(var(--uni-rgb), 0.75) !important;
}

/* the orange site at night */
html[data-accent="orange"][data-theme="dark"] .sheep-topbar .sheep-addr-btn > .bi-geo-alt,
html[data-accent="orange"][data-theme="dark"] .sheep-topbar-basket,
html[data-accent="orange"][data-theme="dark"] .sheep-sidebar .nav-link:not(.active) .sheep-oc-svg,
html[data-accent="orange"][data-theme="dark"] .sheep-sidebar .sheep-oc-link:not(.active) .nav-cat-ico,
html[data-accent="orange"][data-theme="dark"] .sheep-offcanvas .sheep-oc-link:not(.sheep-oc-uni):not(.active) .sheep-oc-svg,
html[data-accent="orange"][data-theme="dark"] .sheep-offcanvas .sheep-oc-link:not(.sheep-oc-uni):not(.active) .nav-cat-ico,
html[data-accent="orange"][data-theme="dark"] .sheep-offcanvas .sheep-oc-uni.sheep-oc-all:not(.active) .sheep-oc-all-art,
html[data-accent="orange"][data-theme="dark"] .ld .ld-why-item > i {
    background: rgba(255, 255, 255, 0.07);
    color: var(--sheep-accent);
}

html[data-accent="orange"][data-theme="dark"] .sheep-offcanvas .sheep-side-unis .sheep-oc-uni.sheep-oc-all.active,
html[data-accent="orange"][data-theme="dark"] .sheep-offcanvas .sheep-oc-link.active:not(.sheep-oc-uni),
html[data-accent="orange"][data-theme="dark"]:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link.active,
html[data-accent="orange"][data-theme="dark"]:not(:has(.hf.hf-map-on)) body .sheep-sidebar .nav-link[aria-current="page"],
html[data-accent="orange"][data-theme="dark"]:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link.nav-cat-all.active {
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 0 0 2px rgba(var(--sheep-accent-rgb), 0.7) !important;
}

html[data-accent="orange"][data-theme="dark"] .hf-host .hf .hf-tile.hf-tile-all.active .hf-tile-art {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--sheep-accent-rgb), 0.7);
}

/* ---- the desktop menu's icons without a square at rest, the site's colour under the mouse (Benji,
   2026-10-15) ----
   "The symbol's background is always green when nothing is on it, then grey under the mouse; rather
   no background all the time, and under the mouse everything turns green, or orange in orange mode".
   At rest the buttons' icons (Mes commandes, Favoris, Tout, Voir les catégories, the Sheep-Me links)
   stand alone in grey, without a square; under the mouse the square appears in a light tint of the
   site's colour and the icon, the name and the chevron take that colour (green, or orange on the
   orange site). Chosen, the "Tout" style as before. Earlier the same evening: neutral squares. */
html:not(#sheep-fav) body .sheep-sidebar .nav-link:not(.active):not([aria-current="page"]) .sheep-oc-svg,
html:not(#sheep-fav) body .sheep-sidebar .sheep-oc-link.nav-cat-all:not(.active) .nav-cat-ico,
html:not(#sheep-fav) body .sheep-sidebar .sheep-side-unis .sheep-oc-all:not(.active) .sheep-oc-all-art {
    background: transparent;
    color: var(--oc-muted, #686b72);
    transition: background-color .15s ease, color .15s ease;
}

@media (hover: hover) {
    html:not(#sheep-fav) body .sheep-sidebar .nav-link:not(.active):not([aria-current="page"]):hover,
    html:not(#sheep-fav) body .sheep-sidebar .sheep-oc-link.nav-cat-all:not(.active):hover,
    html:not(#sheep-fav) body .sheep-sidebar .sheep-side-unis .sheep-oc-all:not(.active):hover {
        color: var(--sheep-accent-ink) !important;
    }

        html:not(#sheep-fav) body .sheep-sidebar .nav-link:not(.active):not([aria-current="page"]):hover .sheep-oc-svg,
        html:not(#sheep-fav) body .sheep-sidebar .sheep-oc-link.nav-cat-all:not(.active):hover .nav-cat-ico,
        html:not(#sheep-fav) body .sheep-sidebar .sheep-side-unis .sheep-oc-all:not(.active):hover .sheep-oc-all-art {
            background: rgba(var(--sheep-accent-rgb), 0.14);
            color: var(--sheep-accent-dark);
        }

        html:not(#sheep-fav) body .sheep-sidebar .nav-link:not(.active):not([aria-current="page"]):hover .sidebar-text::after,
        html:not(#sheep-fav) body .sheep-sidebar .sheep-oc-link.nav-cat-all:not(.active):hover > span::after {
            opacity: 1;
        }

    html[data-theme="dark"]:not(#sheep-fav) body .sheep-sidebar .nav-link:not(.active):not([aria-current="page"]):hover,
    html[data-theme="dark"]:not(#sheep-fav) body .sheep-sidebar .sheep-oc-link.nav-cat-all:not(.active):hover,
    html[data-theme="dark"]:not(#sheep-fav) body .sheep-sidebar .sheep-side-unis .sheep-oc-all:not(.active):hover {
        color: var(--sheep-accent-light) !important;
    }

        html[data-theme="dark"]:not(#sheep-fav) body .sheep-sidebar .nav-link:not(.active):not([aria-current="page"]):hover .sheep-oc-svg,
        html[data-theme="dark"]:not(#sheep-fav) body .sheep-sidebar .sheep-oc-link.nav-cat-all:not(.active):hover .nav-cat-ico,
        html[data-theme="dark"]:not(#sheep-fav) body .sheep-sidebar .sheep-side-unis .sheep-oc-all:not(.active):hover .sheep-oc-all-art {
            background: rgba(var(--sheep-accent-rgb), 0.18);
            color: var(--sheep-accent);
        }

        html[data-accent="orange"][data-theme="dark"]:not(#sheep-fav) body .sheep-sidebar .nav-link:not(.active):not([aria-current="page"]):hover .sheep-oc-svg,
        html[data-accent="orange"][data-theme="dark"]:not(#sheep-fav) body .sheep-sidebar .sheep-oc-link.nav-cat-all:not(.active):hover .nav-cat-ico,
        html[data-accent="orange"][data-theme="dark"]:not(#sheep-fav) body .sheep-sidebar .sheep-side-unis .sheep-oc-all:not(.active):hover .sheep-oc-all-art {
            background: rgba(255, 255, 255, 0.08);
        }
}

/* The orange site at night: the row under the mouse on the lighter navy, not an orange wash (brown). */
@media (hover: hover) {
    html[data-accent="orange"][data-theme="dark"] body .sheep-sidebar .nav-link:not(.active):hover,
    html[data-accent="orange"][data-theme="dark"] body .sheep-sidebar .sheep-oc-link:not(.active):hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
}

/* ---- beside the map too, a chosen button in the "Tout" style (Benji, 2026-10-15) ----
   The narrow menu beside the map: Mes commandes, Pourquoi Sheep-Me and the others, once chosen, are
   the same light wash inside a ring of the site's colour, their icon white in the gradient square. */
@media (min-width: 992px) {
    html:has(.hf.hf-map-on) body .sheep-sidebar .nav-link.active,
    html:has(.hf.hf-map-on) body .sheep-sidebar .nav-link[aria-current="page"] {
        background: rgba(var(--sheep-accent-rgb), 0.12) !important;
        color: var(--sheep-accent-ink) !important;
        box-shadow: inset 0 0 0 2px rgba(var(--sheep-accent-rgb), 0.5) !important;
        transform: none;
        width: auto;
    }

        html:has(.hf.hf-map-on) body .sheep-sidebar .nav-link.active .sheep-oc-svg,
        html:has(.hf.hf-map-on) body .sheep-sidebar .nav-link[aria-current="page"] .sheep-oc-svg {
            background: var(--sheep-grad) !important;
            color: #fff !important;
            box-shadow: 0 4px 10px rgba(var(--sheep-accent-rgb), 0.3) !important;
        }

    html[data-theme="dark"]:has(.hf.hf-map-on) body .sheep-sidebar .nav-link.active,
    html[data-theme="dark"]:has(.hf.hf-map-on) body .sheep-sidebar .nav-link[aria-current="page"] {
        background: rgba(var(--sheep-accent-rgb), 0.2) !important;
        color: #fff !important;
    }

    html[data-accent="orange"][data-theme="dark"]:has(.hf.hf-map-on) body .sheep-sidebar .nav-link.active,
    html[data-accent="orange"][data-theme="dark"]:has(.hf.hf-map-on) body .sheep-sidebar .nav-link[aria-current="page"] {
        background: rgba(255, 255, 255, 0.06) !important;
        box-shadow: inset 0 0 0 2px rgba(var(--sheep-accent-rgb), 0.7) !important;
    }
}

/* ---- the orange buttons at night as by day (Benji, 2026-10-15: "in night mode I'm not a fan of
   the orange button; make it more like in day mode") ----
   The orange gradient keeps its day tones at night (pickup button, the orange site's buttons); the
   green stays the quieter night green, the shadow stays the plain night shadow. */
[data-theme="dark"] {
    --sheep-grad-second: linear-gradient(180deg, #f39f3f 0%, #ef8839 50%, #e76423 100%);
    --sheep-grad-second-hover: linear-gradient(180deg, #ea9637 0%, #e67d30 50%, #da5a1e 100%);
}

[data-accent="orange"][data-theme="dark"],
[data-accent="orange"][data-theme="dark"] [data-theme],
[data-accent="orange"] [data-theme="dark"] {
    --sheep-grad: linear-gradient(180deg, #f39f3f 0%, #ef8839 50%, #e76423 100%);
    --sheep-grad-hover: linear-gradient(180deg, #ea9637 0%, #e67d30 50%, #da5a1e 100%);
    --sheep-grad-deep: linear-gradient(180deg, #f39f3f 0%, #ec7a2c 100%);
}

/* ---- "Voir les catégories" in the desktop menu, one more category row (Benji, 2026-10-15: "not the
   same format as each category") ----
   Same 53 px row, same left edge, the grid in a 48 px soft square where the categories have their
   picture, the name in the categories' size, weight and colour, the hairline above it. */
@media (min-width: 992px) {
    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-side-unis .sheep-oc-uni:last-child {
        background-image: linear-gradient(var(--oc-line, #e9ebee), var(--oc-line, #e9ebee));
    }

    html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link.nav-cat-all {
        min-height: 53px;
        width: calc(100% - 4px);
        margin: 0 2px;
        padding: 2px 3px;
        gap: 10px;
        border-radius: 14px;
        font-size: 0.86rem;
        font-weight: 500;
        color: #4a4d52;
    }

        html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link.nav-cat-all .nav-cat-ico {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            flex: 0 0 48px;
            border-radius: 14px;
            background: #f5f6f7;
            color: var(--sheep-accent-dark);
        }

            html:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link.nav-cat-all .nav-cat-ico svg {
                width: 22px;
                height: 22px;
            }

    html[data-theme="dark"]:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link.nav-cat-all {
        color: #c6c9ce;
    }

        html[data-theme="dark"]:not(:has(.hf.hf-map-on)) body .sheep-sidebar .sheep-oc-link.nav-cat-all:not(.active) .nav-cat-ico {
            background: rgba(255, 255, 255, 0.06);
            color: var(--sheep-accent);
        }
}

/* ---- the top bar's round buttons a touch bigger on phones and tablets (Benji, 2026-10-15) ----
   "The profile button on the right is a bit small next to the others": the circles (profile, bell,
   day / night, language, sign-in) go from 36 to 40 px, closer to the delivery pill beside them;
   37 px on the narrowest phones (was 34). */
@media (max-width: 991.98px) {
    .sheep-topbar {
        --tb-ico: 40px;
    }
}

@media (max-width: 379.98px) {
    .sheep-topbar {
        --tb-ico: 37px;
    }
}

/* ---- the side menu higher, its contents higher (Benji, 2026-10-15) ----
   The card starts 8 px under the top bar (measured bar, was 15 px), and its first heading sits
   right at its top (14 px instead of 34). The hero, the map and the pinned tiles take the same line
   (home-feed.css), so in delivery and in pickup, scrolled or not, everything starts at one height. */
@media (min-width: 992px) {
    .sheep-sidebar {
        top: calc(var(--hf-sticky-top, 51px) + var(--side-gap, 8px));
        padding-top: 6px;
    }

        html:not(#sheep-side-top) body .sheep-sidebar .sheep-sidenav > .sheep-side-heading:first-child {
            margin-top: 0;
            padding-top: 8px;
        }
}

/* ---- the way back in the work areas (Benji, 2026-10-15) ----
   At the top of the merchant's, the deliverer's and the admin pages (WorkAreaTrail): a round "back"
   button to the level above, the trail Accueil > the space > the page in small grey words (the
   current page darker), and in the merchant's and the deliverer's spaces their pages as a row of
   pills, the current one lit in the "Tout" style; the row scrolls sideways on phones. */
.sheep-trail {
    margin: 0 0 18px;
}

.sheep-trail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sheep-trail-back {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 50%;
    background: #fff;
    color: var(--sheep-accent-dark);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

    .sheep-trail-back:hover {
        border-color: var(--sheep-accent-line);
        background: var(--sheep-accent-soft);
        color: var(--sheep-accent-ink);
    }

.sheep-trail-list {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    font-size: 0.84rem;
    color: var(--sheep-gray, #686b72);
}

    .sheep-trail-list::-webkit-scrollbar {
        display: none;
    }

    .sheep-trail-list li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .sheep-trail-list li + li::before {
            content: "";
            width: 6px;
            height: 6px;
            border-right: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: rotate(-45deg);
            opacity: 0.5;
        }

    .sheep-trail-list a {
        color: inherit;
        font-weight: 600;
        text-decoration: none;
    }

        .sheep-trail-list a:hover {
            color: var(--sheep-accent-dark);
        }

    .sheep-trail-list [aria-current="page"] span {
        color: var(--sheep-heading, #202124);
        font-weight: 700;
    }

.sheep-trail-pages {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .sheep-trail-pages::-webkit-scrollbar {
        display: none;
    }

.sheep-trail-page {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 999px;
    background: #fff;
    color: #202124;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .sheep-trail-page:hover {
        border-color: var(--sheep-accent-line);
        background: var(--sheep-accent-soft);
        color: var(--sheep-accent-ink);
    }

    .sheep-trail-page.active {
        border-color: transparent;
        background: rgba(var(--sheep-accent-rgb), 0.12);
        box-shadow: inset 0 0 0 1.5px rgba(var(--sheep-accent-rgb), 0.5);
        color: var(--sheep-accent-ink);
        font-weight: 700;
    }

[data-theme="dark"] .sheep-trail-back,
[data-theme="dark"] .sheep-trail-page {
    border-color: rgba(255, 255, 255, 0.09);
    background: #1b2742;
    color: #e9ebee;
}

[data-theme="dark"] .sheep-trail-back {
    color: var(--sheep-accent);
}

[data-theme="dark"] .sheep-trail-list {
    color: #9ca8ba;
}

    [data-theme="dark"] .sheep-trail-list [aria-current="page"] span {
        color: #e9ebee;
    }

[data-theme="dark"] .sheep-trail-page.active {
    background: rgba(var(--sheep-accent-rgb), 0.2);
    color: #fff;
}

html[data-accent="orange"][data-theme="dark"] .sheep-trail-page.active {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1.5px rgba(var(--sheep-accent-rgb), 0.7);
}

/* A page of the space still to complete: a small orange dot after its name (and "To complete" for
   screen readers and as a tooltip), gently pulsing once when the page opens. */
.sheep-trail-page {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sheep-trail-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--sheep-orange, #ef8839);
    box-shadow: 0 0 0 3px rgba(var(--sheep-orange-rgb, 239, 136, 57), 0.2);
    animation: sheep-trail-dot 1.6s ease-out 2;
}

.sheep-trail-page.to-complete:not(.active) {
    border-color: rgba(var(--sheep-orange-rgb, 239, 136, 57), 0.45);
}

@keyframes sheep-trail-dot {
    0% { box-shadow: 0 0 0 0 rgba(var(--sheep-orange-rgb, 239, 136, 57), 0.45); }
    100% { box-shadow: 0 0 0 8px rgba(var(--sheep-orange-rgb, 239, 136, 57), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .sheep-trail-dot {
        animation: none;
    }
}

/* ---- the work and profile pages, one width (Benji, 2026-10-15: "all these configuration pages, the
   same size, structured properly") ----
   Every page that carries the trail (the merchant's, the deliverer's, the admin and the profile
   pages) sits in one column, 1200 px at most, centred in the space beside the menu; the page's own
   frame (a Bootstrap container, a narrower shell) takes that whole column, its sides flush with the
   trail and its top right under it, so going from one page to another the edges never move. */
/* The 1200 px cap went on 2026-10-16 (Eric): the admin and the merchant pages use the whole desktop. */
main .container-fluid:has(> .sheep-trail) {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

    main .container-fluid:has(> .sheep-trail) > :not(.sheep-trail) {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-top: 0 !important;
    }

    main .container-fluid:has(> .sheep-trail) > :is(.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

/* ---- no side menu on the dashboards, the profile, the work spaces and their settings (Benji,
   2026-10-15: "when we open dashboards, profile, spaces, settings, no bar on the left if not needed") ----
   The customer's side menu (categories, Sheep-Me links) stays on the shop pages; on the pages that
   carry the trail (merchant, deliverer, admin, profile) and on the general dashboard it steps aside
   and the page takes the whole width (still the one centred column). On phones these pages already
   have no side bar; the bottom bar stays. */
@media (min-width: 992px) {
    body:has(.sheep-trail, .dashboard-app-card, .dashboard-path-section) .sheep-sidebar {
        display: none !important;
    }

    body:has(.sheep-trail, .dashboard-app-card, .dashboard-path-section) .main-content {
        padding-left: 0 !important;
    }
}

/* ---- the profile icon bigger in the top bar (Benji, 2026-10-15) ----
   The person in the profile circle (signed in, and signed out on phones where the button is the
   icon alone) goes from about 18 to 24 px, filling its circle like the bell and the basket; beside
   "Se connecter" on wider screens, 20 px. */
html:not(#sheep-pf) body .sheep-topbar .sheep-user-dropdown .sheep-topbar-user > .bi {
    font-size: 1.5rem !important;
    line-height: 1;
}

html:not(#sheep-pf) body .sheep-topbar .sheep-topbar-signin .bi {
    font-size: 1.25rem;
    line-height: 1;
}

@media (max-width: 991.98px) {
    html:not(#sheep-pf) body .sheep-topbar .sheep-topbar-signin .bi {
        font-size: 1.5rem;
    }
}

/* ---- delivery always green, pickup always orange (Benji, 2026-10-15: "in orange mode the pickup
   and delivery buttons have the wrong colour, inverted; these must be strictly kept") ----
   Until now the two sides took the site's main and second colours, which swap on the orange site.
   They now have their own fixed gradients, the logo's green for delivery and its orange for pickup,
   whatever the site's colour and the theme: the top bar's pill (desktop, and the sliding side on
   phones), the signed-in one-tap switch, the home's pill, the entry page's two choices and the
   checkout's two cards. ("html:not(#sheep-mode)" only gives these rules the last word.) */
:root {
    --sheep-grad-delivery: linear-gradient(180deg, #1a9524 0%, #108c26 55%, #068125 100%);
    --sheep-grad-pickup: linear-gradient(180deg, #f39f3f 0%, #ef8839 50%, #e76423 100%);
    --sheep-delivery-rgb: 6, 129, 37;
    --sheep-delivery-ink-rgb: 10, 50, 20;
    --sheep-pickup-rgb: 231, 100, 35;
    --sheep-pickup-ink-rgb: 169, 74, 28;
}

html:not(#sheep-mode) body .sheep-mode-top .sheep-mode-btn.active[data-mode="delivery"],
html:not(#sheep-mode) body .sheep-mode-switch-top,
html:not(#sheep-mode) body .sheep-mode-switch-top:hover,
html:not(#sheep-mode) body .sheep-mode-switch-top:focus-visible,
html:not(#sheep-mode) body .hf-host .hf .hf-mode-btn.active[data-mode="delivery"],
html:not(#sheep-mode) body .ld .ld-entry-mode.active[data-mode="delivery"] {
    background: var(--sheep-grad-delivery);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--sheep-delivery-rgb), 0.28);
    text-shadow: 0 1px 1px rgba(var(--sheep-delivery-ink-rgb), 0.25);
}

html:not(#sheep-mode) body .sheep-mode-top .sheep-mode-btn.active[data-mode="pickup"],
html:not(#sheep-mode) body .sheep-mode-switch-top.is-pickup,
html:not(#sheep-mode) body .sheep-mode-switch-top.is-pickup:hover,
html:not(#sheep-mode) body .sheep-mode-switch-top.is-pickup:focus-visible,
html:not(#sheep-mode) body .hf-host .hf .hf-mode-btn.active[data-mode="pickup"],
html:not(#sheep-mode) body .ld .ld-entry-mode.active[data-mode="pickup"] {
    background: var(--sheep-grad-pickup);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--sheep-pickup-rgb), 0.28);
    text-shadow: 0 1px 1px rgba(var(--sheep-pickup-ink-rgb), 0.25);
}

/* Phones and tablets: the top bar's pill paints the sliding side on its ::before, the button itself stays clear. */
@media (min-width: 360px) and (max-width: 991.98px) and (min-height: 521px) {
    html:not(#sheep-mode) body .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn.active {
        background: transparent;
    }

    html:not(#sheep-mode) body .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn[data-mode="delivery"]::before {
        background: var(--sheep-grad-delivery);
    }

    html:not(#sheep-mode) body .sheep-topbar:not(:has(.sheep-mode-switch-top)) .sheep-mode-top .sheep-mode-btn[data-mode="pickup"]::before {
        background: var(--sheep-grad-pickup);
    }
}

/* The checkout's two cards: the delivery one green, the pickup one orange, chosen or not. */
html:not(#sheep-mode) body .checkout-delivery-mode-card[data-mode="delivery"] i {
    color: #068125;
}

html:not(#sheep-mode) body .checkout-delivery-mode-card.is-selected[data-mode="delivery"] {
    border-color: rgba(var(--sheep-delivery-rgb), 0.55);
    background: rgba(var(--sheep-delivery-rgb), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--sheep-delivery-rgb), 0.55);
}

html:not(#sheep-mode) body .checkout-delivery-mode-card[data-mode="pickup"] i {
    color: #e76423;
}

html:not(#sheep-mode) body .checkout-delivery-mode-card.is-selected[data-mode="pickup"] {
    border-color: rgba(var(--sheep-pickup-rgb), 0.55);
    background: rgba(var(--sheep-pickup-rgb), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--sheep-pickup-rgb), 0.55);
}

/* ---- the orange site's own logos (Benji, 2026-10-16: "these two icons, only for the orange theme") ----
   The top bar (website and app) carries two sets of logos: Eric's for the green site
   (.sheep-brand-for-green) and Benji's long logo and mascot for the orange one
   (.sheep-brand-for-orange). Each set keeps every rule of its slot (light, dark, phone); this only
   hides the set that does not match the site's colour. The green site is unchanged. */
html[data-accent="orange"] .sheep-brand-for-green,
html:not([data-accent="orange"]) .sheep-brand-for-orange,
/* Some pages (sign-in, register, account, the entry page on phones) force their logo with !important
   and long selectors; an id-level :not() keeps this rule above all of them (fixed 2026-10-16). */
html[data-accent="orange"] body:not(#sheep-brand-a):not(#sheep-brand-b) .sheep-brand-for-green,
html:not([data-accent="orange"]) body:not(#sheep-brand-a):not(#sheep-brand-b) .sheep-brand-for-orange {
    display: none !important;
}

/* ---- the orange site's side menu with Benji's pictures (Benji, 2026-10-16: "for the orange theme,
   keep Eric's structure, but the categories' logos in the menus with the icons I gave you") ----
   Each universe row carries Eric's line pictogram and Benji's picture of the universe. The green site
   shows the pictogram on its tinted plinth (Eric's); the orange site shows the picture, which has its
   own plinth, so the tinted square steps aside. Same rows, same six universes, same order. */
.sheep-oc-uni-art .sheep-oc-uni-pic {
    display: none;
}

html[data-accent="orange"] .sheep-oc-uni-art .hf-ico {
    display: none;
}

html[data-accent="orange"] .sheep-oc-uni-art .sheep-oc-uni-pic {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html[data-accent="orange"] body .sheep-sidebar .sheep-oc-link .sheep-oc-uni-art,
html[data-accent="orange"] body .sheep-offcanvas .sheep-oc-link .sheep-oc-uni-art,
html[data-accent="orange"] body .sheep-sidebar .sheep-oc-uni.active .sheep-oc-uni-art,
html[data-accent="orange"] body .sheep-offcanvas .sheep-oc-uni.active .sheep-oc-uni-art {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html[data-accent="orange"] body:has(.hf.hf-map-on) .sheep-sidebar .sheep-oc-link .sheep-oc-uni-art {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
}

/* ---- the merchant dashboard: the shop's state where the shortcuts were (Benji, 2026-10-16) ----
   A pill "Actif" with a green dot when the shop takes orders, "Inactif" with a grey dot when not,
   the sentence beside it and, when inactive, the reasons in bold; then the own-delivery card. */
.supplier-dash-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 16px;
    background: #fff;
}

.supplier-dash-state-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.95rem;
}

.supplier-dash-state-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.supplier-dash-state.is-active .supplier-dash-state-pill {
    background: rgba(6, 129, 37, 0.1);
    color: #08701f;
}

    .supplier-dash-state.is-active .supplier-dash-state-dot {
        background: #0f8b27;
        box-shadow: 0 0 0 3px rgba(15, 139, 39, 0.2);
    }

.supplier-dash-state.is-inactive .supplier-dash-state-pill {
    background: #f1f3f5;
    color: #55585e;
}

    .supplier-dash-state.is-inactive .supplier-dash-state-dot {
        background: #9aa0a6;
    }

.supplier-dash-state-text {
    font-size: 0.9rem;
    color: var(--sheep-gray, #686b72);
}

    .supplier-dash-state-text strong {
        color: #202124;
        font-weight: 700;
    }

[data-theme="dark"] .supplier-dash-state {
    border-color: rgba(255, 255, 255, 0.09);
    background: #1b2742;
}

[data-theme="dark"] .supplier-dash-state.is-active .supplier-dash-state-pill {
    background: rgba(69, 191, 85, 0.16);
    color: #86d48f;
}

[data-theme="dark"] .supplier-dash-state.is-inactive .supplier-dash-state-pill {
    background: rgba(255, 255, 255, 0.07);
    color: #c6c9ce;
}

[data-theme="dark"] .supplier-dash-state-text {
    color: #9ca8ba;
}

    [data-theme="dark"] .supplier-dash-state-text strong {
        color: #e9ebee;
    }

/* ---- the menu editor: "Ajouter un article" first (Benji, 2026-10-16) ----
   The button heads the page; with several categories it unfolds a small list to pick the article's
   category, under the button, on the page's card colours. */
.scm-quick-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 18px;
}

.scm-add-item {
    padding: 10px 20px;
    font-weight: 700;
    font-size: 1rem;
}

.scm-add-chooser {
    position: relative;
}

    .scm-add-chooser > summary {
        list-style: none;
        cursor: pointer;
    }

        .scm-add-chooser > summary::-webkit-details-marker {
            display: none;
        }

.scm-add-chooser-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    min-width: 260px;
    max-width: min(92vw, 360px);
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(32, 33, 36, 0.16);
}

.scm-add-chooser-title {
    padding: 6px 10px 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sheep-gray, #686b72);
}

.scm-add-chooser-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #202124;
    font-weight: 600;
    text-align: left;
}

    .scm-add-chooser-item:hover {
        background: rgba(var(--sheep-accent-rgb), 0.08);
        color: var(--sheep-accent-ink);
    }

    .scm-add-chooser-item .bi {
        opacity: 0.45;
    }

.scm-quick-hint {
    font-size: 0.88rem;
    color: var(--sheep-gray, #686b72);
}

[data-theme="dark"] .scm-add-chooser-list {
    border-color: rgba(255, 255, 255, 0.09);
    background: #1b2742;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .scm-add-chooser-item {
    color: #e9ebee;
}

[data-theme="dark"] .scm-add-chooser-title,
[data-theme="dark"] .scm-quick-hint {
    color: #9ca8ba;
}

/* ---- the trail's dropdown pills (Benji, 2026-10-16: the merchant's "Ma carte" and "Profil") ----
   A group of pages is one pill with a chevron; it unfolds a small card of links under it. The card
   is positioned against the whole trail (not the sideways-scrolling row of pills), so the row never
   clips it; site.js closes it on a click elsewhere. */
.sheep-trail {
    position: relative;
}

.sheep-trail-group {
    flex: 0 0 auto;
}

    .sheep-trail-group > summary {
        list-style: none;
        cursor: pointer;
    }

        .sheep-trail-group > summary::-webkit-details-marker {
            display: none;
        }

.sheep-trail-group-chev {
    font-size: 0.72rem;
    opacity: 0.6;
    transition: transform .15s ease;
}

.sheep-trail-group[open] .sheep-trail-group-chev {
    transform: rotate(180deg);
}

.sheep-trail-group-list {
    position: absolute;
    z-index: 30;
    margin-top: 6px;
    min-width: 220px;
    max-width: min(92vw, 320px);
    padding: 6px;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(32, 33, 36, 0.16);
}

.sheep-trail-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: #202124;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

    .sheep-trail-group-item:hover {
        background: rgba(var(--sheep-accent-rgb), 0.08);
        color: var(--sheep-accent-ink);
    }

    .sheep-trail-group-item.active {
        background: rgba(var(--sheep-accent-rgb), 0.12);
        box-shadow: inset 0 0 0 1.5px rgba(var(--sheep-accent-rgb), 0.5);
        color: var(--sheep-accent-ink);
        font-weight: 700;
    }

[data-theme="dark"] .sheep-trail-group-list {
    border-color: rgba(255, 255, 255, 0.09);
    background: #1b2742;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .sheep-trail-group-item {
    color: #e9ebee;
}

[data-theme="dark"] .sheep-trail-group-item.active {
    background: rgba(var(--sheep-accent-rgb), 0.2);
    color: #fff;
}

/* Phones: the row of pills scrolls sideways, so the unfolded card starts at the trail's left edge
   (under the pill's line) instead of following the pill off the screen. */
@media (max-width: 767.98px) {
    .sheep-trail-group-list {
        left: 0;
        width: min(100%, 320px);
    }
}

/* ---- night map lighter, in the site's navy (Benji, 2026-10-15) ----
   "The map at night is too dark": the night tiles are lifted out of the black and tinted navy, so
   streets, names and the lake read clearly and the map sits with the night pages. Every map uses
   the same night tiles (home, /map, deliverer, supplier), so this covers them all; the satellite
   photos are left alone. */
[data-theme="dark"] img.leaflet-tile[src*="cartocdn.com/dark_all"] {
    filter: contrast(0.8) brightness(1.4) sepia(1) hue-rotate(180deg) saturate(0.8);
}

[data-theme="dark"] .leaflet-container {
    background: #2b3242;
}

/* ---- The acceptance alarm (2026-10-16): orders waiting for the shop, over every page ---- */
.sheep-alarm {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    background: rgba(17, 26, 43, 0.78);
    backdrop-filter: blur(3px);
}

.sheep-alarm-panel {
    width: min(720px, 100%);
    margin: auto 0;
}

.sheep-alarm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    color: #fff;
}

.sheep-alarm-head-text {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .sheep-alarm-head-text h2 {
        margin: 0;
        font-size: 1.35rem;
        font-weight: 800;
        color: #fff;
    }

.sheep-alarm-bell {
    font-size: 1.6rem;
    color: #ffa600;
    animation: sheep-alarm-ring 1.2s ease-in-out infinite;
}

.sheep-alarm-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sheep-alarm-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sheep-alarm-card {
    background: var(--surface-bg, #fff);
    color: var(--bs-body-color, #202124);
    border-radius: 22px;
    padding: 18px 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
    border-left: 8px solid #ffa600;
}

.sheep-alarm-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.sheep-alarm-code {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--sheep-gray, #686b72);
}

.sheep-alarm-customer {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--sheep-green-deep, #068125);
}

.sheep-alarm-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 0.9rem;
}

.sheep-alarm-wait {
    font-weight: 700;
    color: #d9534f;
}

.sheep-alarm-items {
    margin-top: 10px;
    font-size: 0.98rem;
    line-height: 1.45;
}

.sheep-alarm-total {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 1rem;
}

    .sheep-alarm-total strong {
        font-size: 1.15rem;
    }

.sheep-alarm-allergy {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(217, 83, 79, 0.12);
    color: #b02a37;
    font-weight: 600;
}

.sheep-alarm-label {
    margin-top: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sheep-gray, #686b72);
}

.sheep-alarm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.sheep-alarm-chip {
    border: 1.5px solid var(--surface-border, rgba(32, 33, 36, 0.14));
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 1rem;
}

    .sheep-alarm-chip.is-on {
        background: var(--sheep-green-deep, #068125);
        border-color: var(--sheep-green-deep, #068125);
        color: #fff;
    }

.sheep-alarm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
}

.sheep-alarm-accept {
    flex: 1 1 220px;
    font-size: 1.15rem;
    font-weight: 800;
    padding-top: 12px;
    padding-bottom: 12px;
}

.sheep-alarm-view {
    margin-left: auto;
    font-weight: 700;
    text-decoration: none;
}

.sheep-alarm-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    z-index: 1990;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    background: #ffa600;
    color: #1b1b1b;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    animation: sheep-alarm-pulse 1.6s ease-in-out infinite;
}

@media (max-width: 991.98px) {
    .sheep-alarm-bar {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
        width: calc(100% - 32px);
        justify-content: center;
    }

    .sheep-alarm {
        padding: 12px;
    }

    .sheep-alarm-card {
        padding: 16px;
    }

    .sheep-alarm-accept {
        flex-basis: 100%;
    }
}

@keyframes sheep-alarm-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-18deg); }
    40% { transform: rotate(16deg); }
    60% { transform: rotate(-10deg); }
    80% { transform: rotate(6deg); }
}

@keyframes sheep-alarm-pulse {
    0%, 100% { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }
    50% { box-shadow: 0 12px 30px rgba(255, 166, 0, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
    .sheep-alarm-bell, .sheep-alarm-bar { animation: none; }
}

/* The shop's own pause switch, at the end of the state line (2026-10-16). */
.supplier-dash-state .supplier-dash-pause {
    margin-left: auto;
    flex: 0 0 auto;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .supplier-dash-state .supplier-dash-pause {
        margin-left: 0;
        width: 100%;
    }
}

/* The pre-dispatch check in the alarm: a calmer card than a new order (green edge, not orange). */
.sheep-alarm-card.is-ready-check {
    border-left-color: var(--sheep-green-deep, #068125);
}

.sheep-alarm-question {
    margin-top: 10px;
    font-size: 1.15rem;
    font-weight: 800;
}

/* A table row that opens its page (the admin's shops list, 2026-10-16). */
.admin-row-link {
    cursor: pointer;
}