/* ---------- landing page ("Pourquoi Sheep-Me") and the public merchant page ---------- */
.ld {
    --ld-max: 1180px;
    --ld-text: var(--sheep-dark, #202124);
    --ld-muted: #7b8794;
    --ld-card: var(--surface-bg, #ffffff);
    --ld-border: var(--surface-border, rgba(32, 33, 36, 0.08));
    --ld-accent: var(--sheep-green-deep, #068125);
    --ld-accent-dark: var(--sheep-green-dark, #08701f);
    --ld-accent-soft: var(--surface-bg-accent, #f5f6f7);
    --ld-brand: var(--sheep-accent, #0f8b27);
    --ld-brand-dark: var(--sheep-accent-dark, #068125);
    --ld-shadow: 0 10px 30px rgba(32, 33, 36, 0.07);
    color: var(--ld-text);
    padding: 0 16px 40px;
}

[data-theme="dark"] .ld {
    /* Light words on the dark pages too (2026-10-12: the titles of the entry, sign-in and sign-up
       pages kept their dark ink and vanished). */
    --ld-text: #e9ebee;
    --ld-muted: #9ca8ba;
    --ld-card: #1b2742;
    --ld-border: rgba(148, 163, 184, 0.22);
    --ld-accent: var(--sheep-green, #068125);
}

/* ---------- hero ---------- */
.ld-hero {
    max-width: var(--ld-max);
    margin: 0 auto;
    padding: 22px 0 6px;
}

.ld-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "copy art" "search search";
    gap: 18px 24px;
    align-items: center;
    padding: 26px 30px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 92% 12%, rgba(var(--sheep-accent-rgb), 0.12), transparent 32%),
        radial-gradient(circle at 70% 90%, rgba(6, 129, 37, 0.12), transparent 36%),
        linear-gradient(135deg, var(--ld-card), var(--ld-accent-soft));
    border: 1px solid var(--ld-border);
    box-shadow: var(--ld-shadow);
    overflow: hidden;
}

.ld-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ld-accent);
    margin-bottom: 10px;
}

.ld-title {
    display: flex;
    flex-direction: column;
    font-size: clamp(1.8rem, 3.6vw, 2.75rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.ld-title-a {
    color: var(--ld-text);
}

.ld-title-b {
    color: var(--ld-accent);
    font-style: italic;
}

    .ld-title-b em {
        font-style: italic;
        color: #068125;
    }

.ld-lead {
    font-size: 1.02rem;
    color: var(--ld-muted);
    margin: 0 0 18px;
    max-width: 520px;
}

.ld-hero-copy {
    grid-area: copy;
}

.ld-hero-art-wrap {
    grid-area: art;
}

/* ---------- the address bar: centre of the page ---------- */
.ld-search {
    grid-area: search;
    max-width: 860px;
    width: 100%;
    margin: 4px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ld-search-label {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ld-text);
}

.ld-address {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.ld-address-box {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 68px;
    padding: 0 8px 0 20px;
    border-radius: 999px;
    background: var(--ld-card);
    border: 2px solid var(--ld-accent);
    box-shadow: 0 14px 34px rgba(6, 129, 37, 0.18);
}

    .ld-address-box:focus-within {
        border-color: var(--ld-brand);
        box-shadow: 0 0 0 4px rgba(var(--sheep-accent-rgb), 0.18), 0 8px 24px rgba(32, 33, 36, 0.1);
    }

.ld-address-icon {
    color: #068125;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.ld-address-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ld-text);
    font-size: 1.08rem;
    font-weight: 600;
    outline: none;
}

    .ld-address-input::placeholder {
        color: var(--ld-muted);
        font-weight: 500;
    }

.ld-locate {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 20px;
    border-radius: 999px;
    border: 0;
    background: var(--ld-accent);
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(6, 129, 37, 0.3);
    transition: background .15s, transform .15s;
}

    .ld-locate:hover {
        background: var(--ld-accent-dark);
        transform: translateY(-1px);
    }

    .ld-locate:disabled {
        opacity: 0.7;
        transform: none;
    }

.ld-error {
    margin-top: 10px;
    color: #dc2626;
    font-weight: 600;
    font-size: 0.9rem;
}

.ld-search-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 22px;
}

.ld-browse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    border: 0;
    background: transparent;
    color: var(--ld-accent-dark);
    font-weight: 800;
    font-size: 0.92rem;
    padding: 4px 0;
}

    .ld-browse:hover {
        color: #068125;
    }

.ld-coverage {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 0;
    font-size: 0.85rem;
    color: var(--ld-muted);
}

/* Trust chips under the bar: what the customer gets. */
.ld-trust {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

    .ld-trust li {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        align-items: center;
        padding: 10px 14px;
        border-radius: 16px;
        background: var(--ld-card);
        border: 1px solid var(--ld-border);
        box-shadow: 0 6px 16px rgba(32, 33, 36, 0.05);
    }

    .ld-trust i {
        grid-row: 1 / span 2;
        font-size: 1.35rem;
        color: var(--ld-accent);
    }

    .ld-trust strong {
        font-weight: 800;
        color: var(--ld-accent-dark);
        font-size: 0.95rem;
        line-height: 1.2;
    }

    .ld-trust span {
        font-size: 0.8rem;
        color: var(--ld-muted);
        line-height: 1.25;
    }

/* ---------- merchants and deliverers: two big illustrated cards ---------- */
.ld-duo {
    max-width: var(--ld-max);
    margin: 22px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ld-duo-card {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 22px;
    border-radius: 26px;
    border: 1px solid var(--ld-border);
    box-shadow: var(--ld-shadow);
    overflow: hidden;
}

.ld-duo-merchant {
    background:
        radial-gradient(circle at 0% 0%, rgba(var(--sheep-accent-rgb), 0.22), transparent 45%),
        linear-gradient(135deg, var(--ld-card), var(--ld-card));
}

.ld-duo-deliverer {
    background:
        radial-gradient(circle at 0% 0%, rgba(6, 129, 37, 0.2), transparent 45%),
        linear-gradient(135deg, var(--ld-card), var(--ld-card));
}

.ld-duo-art {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(32, 33, 36, 0.18));
}

    /* The deliverers' picture is wide and has its own dark ground (Benji, 2026-10-13): a rounded tile.
       It fills its column (150 to 210 px, see .ld-duo-deliverer) instead of a fixed 210 px that spilled
       44 px over the text (Eric, 2026-10-16). */
    .ld-duo-art.ld-duo-art-wide {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: 22px;
        filter: none;
        box-shadow: 0 14px 24px rgba(32, 33, 36, 0.18);
    }

/* The deliverer card's picture column grows with the card: 150 px beside its twin, up to 210 px alone. */
.ld-duo-deliverer {
    grid-template-columns: clamp(150px, 24%, 210px) minmax(0, 1fr);
}

.ld-duo-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.ld-duo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #068125;
}

.ld-duo-deliverer .ld-duo-kicker {
    color: var(--ld-accent);
}

.ld-duo-body h2 {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
}

.ld-duo-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
}

    .ld-duo-facts li {
        display: flex;
        flex-wrap: wrap;
        gap: 0 6px;
        padding-left: 14px;
        position: relative;
        color: var(--ld-muted);
    }

        .ld-duo-facts li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.55em;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--ld-brand);
        }

    .ld-duo-facts strong {
        color: var(--ld-text);
        font-weight: 800;
    }

.ld-duo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 4px;
}

    .ld-coverage i {
        color: var(--ld-accent);
        margin-top: 2px;
    }

/* The art side: the sheep with its box, three food sheep around it, two leaves, two soft blobs
   and the three handwritten words. */
.ld-hero-art-wrap {
    position: relative;
    min-height: 320px;
}

.ld-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}

.ld-blob-1 {
    width: 300px;
    height: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(6, 129, 37, 0.22), rgba(6, 129, 37, 0.04) 70%);
}

.ld-blob-2 {
    width: 150px;
    height: 150px;
    right: 6%;
    top: 4%;
    background: radial-gradient(circle, rgba(var(--sheep-accent-rgb), 0.35), rgba(var(--sheep-accent-rgb), 0.05) 70%);
}

.ld-leaf {
    position: absolute;
    width: 30px;
    height: 54px;
    border-radius: 0 50% 0 50%;
    background: linear-gradient(135deg, #a8dc8f, #4f9b43);
    opacity: 0.9;
}

.ld-leaf-1 {
    left: 8%;
    top: 8%;
    transform: rotate(-28deg);
}

.ld-leaf-2 {
    right: 10%;
    bottom: 10%;
    width: 22px;
    height: 40px;
    transform: rotate(35deg);
}

.ld-hero-sheep {
    position: relative;
    z-index: 1;
    display: block;
    width: min(68%, 300px);
    margin: 0 auto;
    filter: drop-shadow(0 18px 26px rgba(32, 33, 36, 0.18));
    animation: ld-float 5s ease-in-out infinite;
}

.ld-hero-food {
    position: absolute;
    z-index: 2;
    width: 76px;
    height: 76px;
    object-fit: contain;
    border-radius: 22px;
    background: var(--ld-card);
    padding: 8px;
    box-shadow: 0 10px 24px rgba(32, 33, 36, 0.14);
    animation: ld-float 6s ease-in-out infinite;
}

.ld-hero-food-1 {
    left: 2%;
    top: 46%;
    animation-delay: -1.5s;
}

.ld-hero-food-2 {
    right: 2%;
    top: 30%;
    animation-delay: -3s;
}

.ld-hero-food-3 {
    left: 18%;
    bottom: 0;
    width: 64px;
    height: 64px;
    animation-delay: -4.5s;
}

.ld-hero-words {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 6%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    font-family: "Caveat", "Segoe Script", cursive;
    font-size: 1.7rem;
    line-height: 1.05;
    color: var(--ld-accent-dark);
    transform: rotate(-8deg);
}

    .ld-hero-words span:nth-child(2) {
        color: #068125;
    }

    .ld-hero-words i {
        font-size: 0.9rem;
        color: #068125;
        margin-top: 4px;
    }

@keyframes ld-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .ld-hero-sheep,
    .ld-hero-food {
        animation: none;
    }
}

/* ---------- three panels: what each side gets ---------- */
.ld-panels {
    max-width: var(--ld-max);
    margin: 22px auto 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ld-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: 22px;
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    box-shadow: var(--ld-shadow);
    overflow: hidden;
}

    .ld-panel::before {
        content: "";
        position: absolute;
        right: -40px;
        top: -40px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: var(--ld-accent-soft);
    }

.ld-panel-art {
    position: absolute;
    right: 10px;
    top: 8px;
    width: 92px;
    height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(32, 33, 36, 0.16));
}

.ld-panel-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 96px;
    min-height: 60px;
}

    .ld-panel-head h2 {
        font-size: 1.2rem;
        font-weight: 900;
        margin: 0;
    }

.ld-panel-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ld-accent);
    color: #fff;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.ld-panel-merchant .ld-panel-icon {
    background: var(--ld-brand);
}

.ld-facts {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

    .ld-facts li {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        border-radius: 14px;
        background: var(--surface-bg-soft, #f5f6f7);
        border-left: 3px solid var(--ld-brand);
    }

    .ld-facts strong {
        font-size: 1.22rem;
        font-weight: 900;
        color: var(--ld-accent-dark);
        line-height: 1.15;
    }

    .ld-facts span {
        font-size: 0.88rem;
        color: var(--ld-muted);
    }

.ld-panel-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.ld-panel-btn {
    align-self: flex-start;
    padding: 9px 18px;
}

.ld-panel-link {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ld-accent-dark);
    text-decoration: none;
}

    .ld-panel-link:hover {
        color: #068125;
    }

/* ---------- how it works, why ---------- */
.ld-how,
.ld-why,
.ld-tiers,
.ld-cta {
    max-width: var(--ld-max);
    margin: 30px auto 0;
}

.ld-h2 {
    position: relative;
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 900;
    margin: 0 0 16px;
    padding-bottom: 8px;
}

    .ld-h2::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 42px;
        height: 3px;
        border-radius: 2px;
        background: var(--ld-brand);
    }

.ld-p {
    color: var(--ld-muted);
    margin: 0 0 14px;
}

.ld-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

    .ld-steps li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 16px;
        border-radius: 18px;
        background: var(--ld-card);
        border: 1px solid var(--ld-border);
        box-shadow: var(--ld-shadow);
    }

    .ld-steps li > i {
        font-size: 1.4rem;
        color: var(--ld-accent);
        margin-top: 2px;
    }

    .ld-steps li > div {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .ld-steps strong {
        font-weight: 800;
    }

    /* The description only: the number circle is a span too and must stay white. */
    .ld-steps li > div span {
        font-size: 0.88rem;
        color: var(--ld-muted);
    }

.ld-step-n {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ld-accent);
    color: #fff;
    font-weight: 900;
    font-size: 0.9rem;
}

.ld-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ld-why-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    box-shadow: var(--ld-shadow);
}

    .ld-why-item > i {
        font-size: 1.5rem;
        color: var(--ld-accent);
        flex-shrink: 0;
    }

    .ld-why-item > div {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .ld-why-item strong {
        font-weight: 800;
    }

    .ld-why-item span {
        font-size: 0.88rem;
        color: var(--ld-muted);
    }

/* ---------- merchant page ---------- */
.ld-hero-compact {
    position: relative;
    padding-top: 22px;
}

    .ld-hero-compact .ld-hero-inner {
        position: relative;
        z-index: 1;
        max-width: 720px;
    }

.ld-hero-art {
    position: absolute;
    right: 0;
    top: 18px;
    width: clamp(160px, 22vw, 300px);
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 14px 24px rgba(32, 33, 36, 0.14));
}

.ld-kicker {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ld-accent);
    margin-bottom: 8px;
}

.ld-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

    .ld-checklist li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 14px;
        background: var(--ld-card);
        border: 1px solid var(--ld-border);
    }

    .ld-checklist i {
        color: var(--ld-accent);
        font-size: 1.2rem;
    }

.ld-cta {
    padding: 24px;
    border-radius: 22px;
    background: var(--ld-accent-soft);
    text-align: center;
}

    .ld-cta .ld-h2 {
        margin-bottom: 6px;
    }

.ld-back {
    margin-top: 14px;
    font-size: 0.9rem;
}

    .ld-back a {
        color: var(--ld-muted);
        text-decoration: none;
    }

/* ---------- tablets and phones ---------- */
@media (max-width: 991.98px) {
    .ld-hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "copy" "art" "search";
        padding: 22px;
    }

    .ld-duo {
        grid-template-columns: 1fr;
    }

    .ld-hero-art-wrap {
        min-height: 260px;
    }

    .ld-panels {
        grid-template-columns: 1fr;
    }

    .ld-steps,
    .ld-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ld-hero-compact .ld-hero-inner {
        padding-right: 150px;
    }
}

@media (max-width: 575.98px) {
    .ld {
        padding-bottom: 28px;
    }

    .ld-hero {
        padding-top: 14px;
    }

    .ld-hero-grid {
        padding: 18px 16px;
        gap: 10px;
    }

    .ld-address-box {
        height: auto;
        flex-wrap: wrap;
        padding: 10px 12px;
        border-radius: 22px;
        row-gap: 8px;
    }

    .ld-address-input {
        min-width: 60%;
        height: 36px;
    }

    .ld-locate {
        width: 100%;
        justify-content: center;
    }

    .ld-trust {
        grid-template-columns: 1fr;
    }

    .ld-duo-card {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .ld-duo-art {
        width: 120px;
        height: 120px;
    }

        .ld-duo-art.ld-duo-art-wide {
            width: 180px;
            height: 120px;
        }

    .ld-duo-facts li {
        text-align: left;
    }

    .ld-duo-actions {
        justify-content: center;
    }

    .ld-hero-art-wrap {
        min-height: 220px;
    }

    .ld-hero-sheep {
        width: 180px;
    }

    .ld-hero-food {
        width: 56px;
        height: 56px;
        padding: 6px;
    }

    .ld-hero-words {
        font-size: 1.35rem;
    }

    .ld-steps,
    .ld-why-grid,
    .ld-checklist {
        grid-template-columns: 1fr;
    }

    .ld-facts strong {
        font-size: 1.12rem;
    }

    .ld-hero-art {
        position: static;
        display: block;
        width: 120px;
        margin: 0 auto 6px;
    }

    .ld-hero-compact .ld-hero-inner {
        padding-right: 0;
    }
}

/* The Google suggestions list must sit above the hero. */
.pac-container {
    z-index: 1100;
}

/* ---------- the app block ---------- */
.ld-app {
    max-width: var(--ld-max);
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(var(--sheep-accent-rgb), 0.35), transparent 45%),
        linear-gradient(135deg, var(--sheep-green-dark, #08701f), var(--sheep-green, #068125) 60%, var(--sheep-green-light, #2fae40));
    box-shadow: 0 18px 40px rgba(8, 112, 31, 0.25);
    overflow: hidden;
}

.ld-app-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ld-app-title {
    margin: 12px 0 6px;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 900;
    color: #fff;
}

.ld-app-lead {
    margin: 0 0 14px;
    font-size: 1rem;
    opacity: 0.92;
}

.ld-app-perks {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-weight: 700;
    font-size: 0.92rem;
}

    .ld-app-perks li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .ld-app-perks i {
        color: #068125;
    }

.ld-app-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ld-store {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
    padding: 8px 18px 8px 14px;
    border-radius: 14px;
    background: #1b1c1f;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    text-decoration: none;
    transition: transform .15s, background .15s;
}

    .ld-store:hover,
    .ld-store:focus-visible {
        background: #000;
        color: #fff;
        transform: translateY(-2px);
    }

    .ld-store i {
        font-size: 1.7rem;
        line-height: 1;
    }

    .ld-store span {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .ld-store small {
        font-size: 0.68rem;
        opacity: 0.85;
    }

    .ld-store strong {
        font-size: 1.1rem;
        font-weight: 800;
    }

.ld-app-art img {
    display: block;
    width: 220px;
    height: auto;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.3));
}

@media (max-width: 767.98px) {
    .ld-app {
        grid-template-columns: 1fr;
        padding: 22px 18px;
    }

    .ld-app-art {
        display: none;
    }

    .ld-store {
        flex: 1 1 150px;
        min-width: 0;
    }
}

/* ---------- language chips in the hero (light background) ---------- */
.ld-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--sheep-green, #068125);
    font-size: 1.05rem;
}

    .ld-lang .sheep-lang-chip {
        border: 1px solid var(--surface-border-strong, rgba(32, 33, 36, 0.18));
        background: var(--ld-card);
        color: var(--bs-body-color, #1f2937);
        transition: background .15s, border-color .15s;
    }

        .ld-lang .sheep-lang-chip:hover {
            border-color: var(--ld-brand);
            color: #068125;
        }

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

/* ---------- hero photo (2026-10-10) ---------- */
/* The panorama across the top of the hero card, then the title, then the address box (still in
   view on a laptop screen). It replaces the mascot drawing, which the photo already shows. */
.ld-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "banner" "copy" "search";
}

.ld-hero-banner {
    grid-area: banner;
    margin: -10px -12px 0;
    height: clamp(170px, 18vw, 280px);
    border-radius: 22px;
    overflow: hidden;
    background: #cfe6f5;
    box-shadow: 0 12px 30px rgba(32, 33, 36, 0.12);
}

    .ld-hero-banner img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 35% 55%;
    }

.ld-hero-copy {
    max-width: 860px;
}

@media (max-width: 991.98px) {
    .ld-hero-grid {
        grid-template-areas: "banner" "copy" "search";
    }
}

@media (max-width: 767.98px) {
    .ld-hero-banner {
        margin: -8px -8px 0;
        height: 140px;
        border-radius: 18px;
    }

        /* Keep the sheep and its scooter in the frame. */
        .ld-hero-banner img {
            object-position: 22% 50%;
        }
}

/* ==========================================================================
   Landing hero, compact (2026-10-10): the photo with a card on it holding the
   title, the address box and sign in; a cue to scroll; the three promises.
   ========================================================================== */
.ld-hero-v2 {
    padding: 24px 0 0;
}

.ld-hv-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: clamp(460px, 62vh, 560px);
    padding: 28px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(32, 33, 36, 0.16);
}

.ld-hv-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    background: #cfe6f5;
}

    .ld-hv-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 26% 55%;
        display: block;
    }

.ld-hv-card {
    position: relative;
    width: min(500px, 54%);
    padding: 22px 24px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 50px rgba(32, 33, 36, 0.28);
    color: var(--ld-text);
}

[data-theme="dark"] .ld-hv-card {
    background: rgba(17, 24, 39, 0.93);
}

.ld-hv-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 10px;
}

.ld-hv-card .ld-eyebrow {
    margin: 0;
    font-size: 0.76rem;
}

.ld-hv-card .ld-lang {
    margin: 0;
    font-size: 0.9rem;
}

    .ld-hv-card .ld-lang .sheep-lang-chip {
        min-width: 30px;
        height: 26px;
        padding: 0 6px;
        font-size: 0.7rem;
    }

.ld-hv-card .ld-title {
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    margin: 0 0 8px;
}

.ld-hv-card .ld-lead {
    font-size: 0.92rem;
    margin: 0 0 14px;
}

.ld-hv-card .ld-search-label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.9rem;
}

.ld-hv-card .ld-address-box {
    height: 56px;
    padding: 0 6px 0 16px;
    box-shadow: 0 8px 20px rgba(6, 129, 37, 0.14);
}

.ld-hv-card .ld-locate {
    height: 44px;
    padding: 0 14px;
    font-size: 0.88rem;
}

.ld-hv-card .ld-browse {
    margin-top: 10px;
}

.ld-login {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--ld-border);
    font-size: 0.86rem;
    color: var(--ld-muted);
}

    .ld-login i {
        color: var(--ld-accent);
    }

    .ld-login a {
        font-weight: 800;
        color: var(--ld-accent);
        text-decoration: none;
    }

        .ld-login a:hover {
            color: #068125;
            text-decoration: underline;
        }

.ld-login-note {
    flex-basis: 100%;
    font-size: 0.8rem;
}

.ld-coverage-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 0.76rem;
    color: var(--ld-muted);
}

/* "There is more below": a soft bouncing cue under the hero. */
.ld-scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 10px auto 4px;
    border: 0;
    background: transparent;
    color: var(--ld-accent);
    font-size: 0.82rem;
    font-weight: 800;
}

    .ld-scroll-cue i {
        font-size: 1.15rem;
        animation: ld-cue 1.6s ease-in-out infinite;
    }

    .ld-scroll-cue:hover {
        color: #068125;
    }

@keyframes ld-cue {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ld-scroll-cue i {
        animation: none;
    }
}

.ld-hero-v2 .ld-trust {
    margin: 4px 0 0;
    scroll-margin-top: calc(var(--navbar-height, 56px) + 20px);
}

/* Phones: the photo first, the card overlapping its bottom edge, everything tighter. */
@media (max-width: 767.98px) {
    .ld {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ld-hero-v2 {
        padding-top: 16px;
    }

    .ld-hv-stage {
        display: block;
        min-height: 0;
        padding: 0;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
    }

    .ld-hv-photo {
        position: relative;
        height: 180px;
        border-radius: 20px;
        overflow: hidden;
    }

        .ld-hv-photo img {
            object-position: 20% 50%;
        }

    .ld-hv-card {
        width: auto;
        margin: -34px 8px 0;
        padding: 16px 16px 14px;
        border-radius: 18px;
        background: var(--ld-card);
        backdrop-filter: none;
        box-shadow: 0 14px 34px rgba(32, 33, 36, 0.16);
    }

    .ld-hv-card .ld-title {
        font-size: 1.45rem;
    }

    .ld-hv-card .ld-lead {
        font-size: 0.88rem;
        margin-bottom: 12px;
    }

    .ld-hv-card .ld-address-box {
        height: 52px;
        flex-wrap: nowrap;
        padding: 0 5px 0 14px;
        border-radius: 999px;
    }

    .ld-hv-card .ld-address-input {
        min-width: 0;
        height: auto;
        font-size: 1rem;
    }

    .ld-hv-card .ld-locate {
        width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
    }

        .ld-hv-card .ld-locate span {
            display: none;
        }

    /* The three promises: one swipeable row instead of three stacked cards. */
    .ld-hero-v2 .ld-trust {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

        .ld-hero-v2 .ld-trust::-webkit-scrollbar {
            display: none;
        }

        .ld-hero-v2 .ld-trust li {
            flex: 0 0 82%;
            scroll-snap-align: start;
        }
}

/* ---------- landing "C'est parti" (2026-10-10) ---------- */
/* Orange, the one call to action in the box; "Me localiser" becomes a quiet round icon. */
.ld-go {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    margin-left: 4px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ld-brand);
    color: #202124;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(var(--sheep-accent-rgb), 0.3);
    transition: background .15s, transform .15s;
}

    .ld-go:hover {
        background: var(--ld-brand-dark);
        color: #ffffff;
        transform: translateY(-1px);
    }

    .ld-go:disabled {
        opacity: 0.75;
        transform: none;
    }

.ld-hv-card .ld-locate {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    background: transparent;
    color: var(--ld-accent);
    border: 1px solid var(--ld-border);
    box-shadow: none;
}

    .ld-hv-card .ld-locate:hover {
        background: var(--ld-accent-soft);
        color: var(--ld-accent);
    }

    .ld-hv-card .ld-locate span {
        display: none;
    }

@media (max-width: 767.98px) {
    .ld-go {
        height: 42px;
        padding: 0 13px;
        font-size: 0.88rem;
    }

    .ld-hv-card .ld-locate {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 359.98px) {
    .ld-go span {
        display: none;
    }
}

/* ---------- sober hero card (2026-10-10) ---------- */
.ld-hv-card {
    padding: 26px 26px 20px;
}

    .ld-hv-card .ld-title {
        margin: 0 0 18px;
    }

.ld-hv-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    margin-top: 14px;
    font-size: 0.86rem;
    color: var(--ld-muted);
}

.ld-hv-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ld-accent);
    font-weight: 800;
    text-decoration: none;
}

    .ld-hv-link:hover {
        color: #068125;
        text-decoration: underline;
    }

@media (max-width: 767.98px) {
    .ld-hv-card {
        padding: 18px 16px 16px;
    }

        .ld-hv-card .ld-title {
            margin-bottom: 14px;
        }

    /* Room for the address: the go button keeps only its arrow. */
    .ld-go {
        width: 42px;
        padding: 0;
        justify-content: center;
    }

        .ld-go span {
            display: none;
        }
}

/* ---------- desktop hero closer to the photo's own shape (2026-10-10) ---------- */
/* Lower than before so the panorama is barely cropped: the whole sheep on its scooter on the
   left, the lake, the mountains and the town behind the card. */
@media (min-width: 768px) {
    .ld-hv-stage {
        min-height: clamp(360px, 30vw, 460px);
        padding: 22px 28px;
    }

        .ld-hv-stage .ld-hv-photo img {
            object-position: 40% 58%;
        }

    .ld-hv-card {
        width: min(460px, 46%);
    }
}

/* "Pas d'abonnement." in large on the merchant page: the tier fees are commissions, never a subscription. */
.ld-noabo {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--sheep-accent, #0f8b27);
}

/* ==========================================================================
   Landing, model design (sheep-me-lausanne, Benji, 2026-10-12)
   Like the model's hero: the text on the white page (big serif title, its last words in italics),
   the address box and the links under it, the photo beside it with a large rounded top-left
   corner (under it on phones). Below: white cards with a hairline, plain headings, the app
   block on the model's light grey.
   ========================================================================== */
.ld {
    --ld-muted: #686b72;
    --ld-border: var(--sheep-line, #e9ebee);
    --ld-shadow: none;
}

/* The page now opens on the three promises (2026-10-12): 24 px under the top bar, 16 on phones. */
.ld .ld-hero-v2 {
    padding-top: 24px;
}

@media (max-width: 767.98px) {
    .ld .ld-hero-v2 {
        padding-top: 16px;
    }
}

/* The page's hero (2026-10-12): Benji's banner, the sheep on its scooter above Lausanne, with the
   site's rounded corners; on phones taller and cropped around the sheep. */
.ld-why-banner {
    aspect-ratio: 3 / 1;
    margin: 0 0 18px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--sheep-soft, #f5f6f7);
}

    .ld-why-banner img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 30% 50%;
    }

@media (max-width: 767.98px) {
    .ld-why-banner {
        aspect-ratio: 16 / 9;
        margin-bottom: 14px;
        border-radius: 18px;
    }

        .ld-why-banner img {
            object-position: 22% 50%;
        }
}

.ld .ld-hv-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 35px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.ld .ld-hv-photo {
    position: relative;
    inset: auto;
    order: 2;
    height: clamp(320px, 31vw, 420px);
    border-radius: 95px 24px 24px 24px;
    overflow: hidden;
    background: var(--sheep-soft, #f5f6f7);
    box-shadow: 0 8px 28px rgba(32, 33, 36, 0.05);
}

    .ld .ld-hv-stage .ld-hv-photo img {
        object-position: 22% 55%;
    }

.ld .ld-hv-card {
    order: 1;
    width: auto;
    margin: 0;
    padding: 18px 20px 18px 4px;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

/* The big titles in the hero's lettering (Benji, 2026-10-13): Nunito, heavy, the last words in the
   site's colour, instead of the serif. */
.ld .ld-hv-card .ld-title {
    margin: 0 0 24px;
    font-family: var(--sheep-display);
    font-size: clamp(2.1rem, 3.8vw, 3rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.ld .ld-title-a,
.ld .ld-title-b {
    color: var(--ld-text);
    font-style: normal;
}

    .ld .ld-title-b em {
        font-style: normal;
        color: var(--sheep-accent-dark);
    }

.ld.is-dark .ld-title-b em {
    color: var(--sheep-accent);
}

.ld .ld-hv-card .ld-address-box {
    height: 58px;
    padding: 0 6px 0 16px;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 14px;
    background: var(--ld-card);
    box-shadow: 0 8px 28px rgba(32, 33, 36, 0.05);
}

    .ld .ld-hv-card .ld-address-box:focus-within {
        border-color: var(--sheep-accent, #0f8b27);
        box-shadow: 0 0 0 4px rgba(var(--sheep-accent-rgb), 0.14);
    }

.ld .ld-address-icon {
    color: var(--sheep-green, #068125);
}

.ld .ld-address-input {
    font-size: 0.95rem;
    font-weight: 500;
}

.ld .ld-hv-card .ld-locate {
    border-radius: 11px;
    border-color: var(--sheep-line, #e9ebee);
    color: var(--sheep-green, #068125);
}

.ld .ld-go {
    height: 46px;
    border-radius: 11px;
    background: var(--sheep-grad);
    color: #fff;
    font-weight: 650;
    box-shadow: none;
}

    .ld .ld-go:hover {
        background: var(--sheep-grad-hover);
        color: #fff;
        box-shadow: 0 6px 16px rgba(var(--sheep-accent-dark-rgb), 0.24);
    }

.ld .ld-hv-links {
    margin-top: 18px;
    font-size: 0.8rem;
}

.ld .ld-hv-link {
    color: var(--sheep-accent-ink, #08701f);
    font-weight: 600;
}

    .ld .ld-hv-link:hover {
        color: var(--sheep-accent, #0f8b27);
        text-decoration: none;
    }

.ld .ld-scroll-cue {
    margin-top: 22px;
    color: var(--ld-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

    .ld .ld-scroll-cue:hover {
        color: var(--sheep-accent-ink, #08701f);
    }

/* Phones: text, address, links, then the photo. */
@media (max-width: 767.98px) {
    .ld .ld-hv-stage {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ld .ld-hv-card {
        padding: 6px 4px 0;
    }

        .ld .ld-hv-card .ld-title {
            margin-bottom: 20px;
            font-size: clamp(1.95rem, 8.6vw, 2.6rem);
        }

        .ld .ld-hv-card .ld-address-box {
            height: 54px;
            padding: 0 5px 0 14px;
        }

    .ld .ld-go {
        height: 42px;
    }

    .ld .ld-hv-photo {
        height: 190px;
        border-radius: 60px 20px 20px 20px;
    }
}

/* ---- below the hero: white cards with a hairline, plain headings ---- */
.ld .ld-trust li,
.ld .ld-why-item,
.ld .ld-steps li {
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 19px;
    background: var(--ld-card);
    box-shadow: none;
}

.ld .ld-trust i,
.ld .ld-why-item > i {
    color: var(--sheep-green, #068125);
}

.ld .ld-trust strong {
    font-weight: 650;
    color: var(--ld-text);
}

.ld .ld-duo-card,
.ld .ld-duo-merchant,
.ld .ld-duo-deliverer {
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 19px;
    background: var(--ld-card);
    box-shadow: none;
}

.ld .ld-duo-kicker,
.ld .ld-duo-deliverer .ld-duo-kicker {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--ld-muted);
}

.ld .ld-duo-body h2,
.ld .ld-h2 {
    font-weight: 650;
    letter-spacing: -0.04em;
    color: var(--ld-text);
}

.ld .ld-h2 {
    padding-bottom: 0;
    font-size: 1.6rem;
}

    .ld .ld-h2::after {
        display: none;
    }

.ld .ld-why-item strong {
    font-weight: 650;
}

/* The app: the model's light grey panel, dark serif title. */
.ld .ld-app {
    border-radius: 25px;
    color: var(--ld-text);
    background: var(--sheep-soft, #f5f6f7);
    box-shadow: none;
}

.ld .ld-app-kicker {
    padding: 0;
    background: transparent;
    color: var(--ld-muted);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.ld .ld-app-title {
    font-family: var(--sheep-display);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ld-text);
}

.ld .ld-app-lead {
    color: var(--ld-muted);
    opacity: 1;
}

.ld .ld-app-perks {
    font-weight: 600;
}

    .ld .ld-app-perks i {
        color: var(--sheep-green, #068125);
    }

.ld .ld-store {
    background: #202124;
    border-color: transparent;
}

.ld .ld-app-art img {
    filter: drop-shadow(0 10px 18px rgba(32, 33, 36, 0.14));
}

[data-theme="dark"] .ld .ld-app {
    background: #1b2742;
}

/* ==========================================================================
   First visit without an account or an address: the model's simplified entry (Benji, 2026-10-12)
   The text and three ways in, as full-width rows: the position (orange gradient), the address
   (white row holding the box and its arrow), "or", an account; the photo beside them on wide
   screens with the model's large top-left corner, none on phones.
   ========================================================================== */
.ld.ld-simple {
    padding-bottom: 8px;
}

.ld-entry {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 6vw, 80px);
    padding: 55px 0 10px;
}

.ld-entry-copy {
    max-width: 500px;
    min-width: 0;
}

.ld-entry-eyebrow {
    margin: 0 0 15px;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ld-muted);
}

/* The hero's lettering (Benji, 2026-10-13): Nunito, heavy, the last words in the site's colour. */
.ld-entry-title {
    margin: 0 0 18px;
    font-family: var(--sheep-display);
    font-size: clamp(2.1rem, 3.8vw, 3.1rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ld-text);
}

    .ld-entry-title em {
        font-style: normal;
        color: var(--sheep-accent-dark);
    }

    .ld.is-dark .ld-entry-title em,
    [data-theme="dark"] .ld-entry-title em {
        color: var(--sheep-accent);
    }

.ld-entry-lead {
    margin: 0 0 22px;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--ld-muted);
}

.ld-entry-option {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 60px;
    margin-top: 10px;
    padding: 0 16px;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 14px;
    background: var(--ld-card);
    color: var(--ld-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

    .ld-entry-option > span {
        flex: 1 1 auto;
    }

    .ld-entry-option svg {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

        .ld-entry-option svg.ld-entry-arrow {
            width: 18px;
            height: 18px;
            flex-basis: 18px;
        }

    a.ld-entry-option:hover,
    a.ld-entry-option:focus-visible,
    .ld-entry-address:focus-within {
        border-color: var(--sheep-accent-line, #bfe2c5);
        color: var(--ld-text);
        box-shadow: 0 0 0 3px rgba(var(--sheep-accent-rgb), 0.1);
    }

.ld-entry-gps {
    border-color: transparent;
    background: var(--sheep-grad);
    color: #fff;
}

    .ld-entry-gps:hover,
    .ld-entry-gps:focus-visible {
        background: var(--sheep-grad-hover);
        box-shadow: 0 6px 16px rgba(var(--sheep-accent-dark-rgb), 0.24);
    }

    .ld-entry-gps:disabled {
        opacity: 0.85;
    }

.ld-entry-address {
    padding-right: 8px;
}

    .ld-entry-address .ld-address-input {
        flex: 1 1 auto;
        min-width: 0;
        height: 56px;
        font-size: 0.875rem;
        font-weight: 600;
    }

.ld-entry-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 11px;
    background: var(--sheep-grad);
    color: #fff;
}

    .ld-entry-go:hover {
        background: var(--sheep-grad-hover);
    }

.ld-entry-divider {
    margin: 14px 0 4px;
    font-size: 0.75rem;
    text-align: center;
    color: var(--ld-muted);
}

.ld-entry-login {
    margin: 18px 0 0;
    font-size: 0.85rem;
    color: var(--ld-muted);
}

    .ld-entry-login a {
        color: var(--sheep-accent-ink, #08701f);
        font-weight: 600;
        text-decoration: none;
    }

/* The four languages under the sign-in (Benji, 2026-10-12): a globe, then light pills, the current
   language in pale orange. */
.ld-entry-langs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}

    .ld-entry-langs > svg {
        width: 16px;
        height: 16px;
        margin-right: 4px;
        fill: none;
        stroke: var(--ld-muted);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.ld-entry-lang {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 999px;
    background: var(--surface-bg, #fff);
    color: var(--ld-text);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

    .ld-entry-lang:hover,
    .ld-entry-lang:focus-visible {
        border-color: var(--sheep-accent-line, #bfe2c5);
        color: var(--sheep-accent-ink, #08701f);
    }

    .ld-entry-lang.active {
        border-color: var(--sheep-accent-line, #bfe2c5);
        background: var(--sheep-accent-soft, #e6f4e8);
        color: var(--sheep-accent-ink, #08701f);
    }

.ld-entry-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 22px;
    font-size: 0.75rem;
}

    .ld-entry-links a,
    .ld-entry-links button {
        padding: 0;
        border: 0;
        background: none;
        color: var(--ld-muted);
        text-decoration: underline;
        text-decoration-color: var(--sheep-line, #e9ebee);
        text-underline-offset: 3px;
    }

        .ld-entry-links a:hover,
        .ld-entry-links button:hover {
            color: var(--ld-text);
        }

.ld-entry-art {
    height: clamp(420px, 46vw, 590px);
    margin: 0;
    border-radius: 100px 25px 25px 25px;
    overflow: hidden;
    background: var(--sheep-soft, #f5f6f7);
}

    .ld-entry-art img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }

    /* The home page's picture is wide (3:2, Benji, 2026-10-13): the frame follows it instead of
       cutting the sheep and the table off a square. */
    .ld-entry-art.ld-entry-art-wide {
        height: auto;
        aspect-ratio: 3 / 2;
        max-height: 590px;
    }

/* The picture's column (Benji, 2026-10-13) and the languages: on wide screens the languages stand
   above the title, in the words' column, the picture beside them over both rows; on phones the
   picture comes first, the languages right under it, then the title. */
.ld-entry-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ld-entry-langs.ld-entry-langs-art {
    margin-top: 0;
}

@media (min-width: 768px) {
    .ld-entry {
        grid-template-rows: auto 1fr;
        row-gap: 0; /* the languages sit right above the title, the grid's gap stays between the columns */
    }

    .ld-entry-langs.ld-entry-langs-art {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 22px;
    }

    .ld-entry-copy {
        grid-column: 1;
        grid-row: 2;
    }

    .ld-entry-side {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 767.98px) {
    .ld-entry-side,
    .ld-entry-langs.ld-entry-langs-art {
        order: -1;
    }

    .ld-entry-side {
        gap: 0;
    }

        .ld-entry-side .ld-entry-art.ld-entry-art-wide {
            margin-bottom: 16px;
        }

    .ld-entry-langs.ld-entry-langs-art {
        justify-content: center;
        margin: 0 0 18px;
    }
}

@media (max-width: 767.98px) {
    .ld-entry {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 24px;
    }

    .ld-entry-copy {
        max-width: 560px;
    }

    /* Phones: the desktop photo opens the entry page, above the title, as a welcome picture
       (Benji, 2026-10-12); the sign-in page keeps its form first. */
    .ld-entry-art {
        order: -1;
        height: clamp(180px, 52vw, 300px);
        margin-bottom: 22px;
        border-radius: 56px 18px 18px 18px;
    }

        /* The home page's picture on phones (Benji, 2026-10-13): edge to edge right under the bar,
           as a welcome banner, its two bottom corners rounded, a soft shadow under it. */
        .ld-entry-art.ld-entry-art-wide {
            width: 100vw;
            height: auto;
            max-height: 340px;
            margin: -24px 0 24px calc(50% - 50vw);
            border-radius: 0 0 30px 30px;
            box-shadow: 0 14px 30px rgba(32, 33, 36, 0.14);
        }

    .acc-login .ld-entry-art {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ld-entry {
        padding-top: 18px;
    }

    .ld-entry-title {
        font-size: clamp(1.8rem, 8.4vw, 2.3rem);
    }
}

[data-theme="dark"] .ld-entry-option:not(.ld-entry-gps) {
    background: #1b2742;
    border-color: rgba(148, 163, 184, 0.22);
}

/* "Être livré" or "À emporter", as the pill of the top bar (Benji, 2026-10-13): a grey track, the
   chosen one in the site's gradient with white words, all round; the pair and its line of
   explanation framed together. The pair explains only: the position, the address or the account
   is asked right below. */
.ld-entry-modes-box {
    margin: 3px 0 22px;
    padding: 8px 8px 12px;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 24px;
    background: var(--surface-bg, #fff);
    box-shadow: 0 6px 18px rgba(32, 33, 36, 0.05);
}

/* A small title over the pair: "Comment ça marche ?" (Benji, 2026-10-13). */
.ld-entry-modes-title {
    margin: 4px 10px 8px;
    color: var(--ld-text, #202124);
    font-family: var(--sheep-display, inherit);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
}

.ld-entry-modes {
    display: flex;
    gap: 4px;
    margin: 0 0 10px;
    padding: 4px;
    border-radius: 999px;
    background: var(--sheep-soft, #f5f6f7);
}

.ld-entry-mode {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ld-text, #202124);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.ld-entry-mode-note {
    margin: 0 10px;
    color: var(--ld-muted);
    font-size: 0.86rem;
    line-height: 1.45;
    text-align: center;
}

    .ld-entry-mode svg {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .ld-entry-mode:not(.active):hover,
    .ld-entry-mode:not(.active):focus-visible {
        background: rgba(255, 255, 255, 0.7);
        color: var(--ld-text);
    }

    .ld-entry-mode.active {
        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);
    }

[data-theme="dark"] .ld-entry-modes-box {
    border-color: rgba(148, 163, 184, 0.22);
    background: #1b2742;
    box-shadow: none;
}

[data-theme="dark"] .ld-entry-mode:not(.active):hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   Login page in the site style (Benji, 2026-10-12): the entry page's layout (words and form on the
   left, the photo on the right), rounded 58 px fields with a hairline, the orange gradient
   button, then "or", the other ways in as white rows, and signing up.
   ========================================================================== */
.acc-login .ld-entry {
    padding-top: 40px;
}

.acc-login .ld-entry-lead {
    margin-bottom: 24px;
}

.acc-form .acc-field {
    margin-bottom: 10px;
}

.acc-form .form-floating > .form-control {
    height: 58px;
    min-height: 58px;
    padding-left: 16px;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 14px;
    background: var(--ld-card);
    font-size: 0.92rem;
}

    .acc-form .form-floating > .form-control:focus {
        border-color: var(--sheep-accent-line, #bfe2c5);
        box-shadow: 0 0 0 3px rgba(var(--sheep-accent-rgb), 0.12);
    }

.acc-form .form-floating > label {
    padding-left: 16px;
    color: var(--ld-muted);
    font-size: 0.85rem;
}

.acc-form .acc-show {
    color: var(--sheep-accent-ink, #08701f);
    font-size: 0.8rem;
    font-weight: 600;
}

.acc-form .acc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 2px 6px;
    font-size: 0.82rem;
}

    .acc-form .acc-row .form-check-label {
        color: var(--ld-text);
    }

    .acc-form .acc-row a {
        color: var(--sheep-accent-ink, #08701f);
        font-weight: 600;
        text-decoration: none;
    }

        .acc-form .acc-row a:hover {
            text-decoration: underline;
        }

.acc-form .validation-message,
.acc-form .validation-errors {
    margin-top: 4px;
    font-size: 0.8rem;
}

.acc-form .acc-submit {
    margin-top: 14px;
    border: 0;
    cursor: pointer;
}

/* Google, Apple, Facebook, X: the same white rows as the other ways in. */
.acc-login .acc-external .ss-ext-btn {
    justify-content: flex-start;
    gap: 13px;
    max-width: none;
    height: 58px;
    min-height: 58px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--sheep-line, #e9ebee);
    border-radius: 14px;
    background: var(--ld-card);
    color: var(--ld-text);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: none;
}

    .acc-login .acc-external .ss-ext-btn:hover {
        border-color: var(--sheep-accent-line, #bfe2c5);
        opacity: 1;
        transform: none;
        box-shadow: 0 0 0 3px rgba(var(--sheep-accent-rgb), 0.1);
    }

.acc-login .acc-external .d-grid {
    gap: 10px !important;
}

/* No external sign-in set up (local copy): a quiet line instead of a yellow box. */
.acc-login .acc-external .alert {
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ld-muted);
    font-size: 0.78rem;
    text-align: center;
}

[data-theme="dark"] .acc-form .form-floating > .form-control,
[data-theme="dark"] .acc-login .acc-external .ss-ext-btn {
    background: #1b2742;
    border-color: rgba(148, 163, 184, 0.22);
    color: #e9ebee;
}

/* ---- the sign-up page, like the sign-in page (Benji, 2026-10-12) ----
   Same layout and fields; the quick ways first (Google, Apple, Facebook, X), then "or with your
   email address", first and last names side by side, and "I already have an account" last. */
.acc-register .acc-external {
    margin-bottom: 2px;
}

.acc-register .ld-entry-divider {
    margin: 16px 0 12px;
}

.acc-register .acc-names {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
}

@media (max-width: 419.98px) {
    .acc-register .acc-names {
        grid-template-columns: minmax(0, 1fr);
    }
}

.acc-register .acc-have-account {
    margin-top: 10px;
}

/* The X logo is white: black on the white rows, white on the dark ones. Apple's is a black apple on
   white: in the dark theme it becomes a small white disc, like Google's. */
.acc-login .acc-external .ss-x .ss-icon {
    filter: invert(1);
}

[data-theme="dark"] .acc-login .acc-external .ss-x .ss-icon {
    filter: none;
}

[data-theme="dark"] .acc-login .acc-external .ss-apple .ss-icon {
    border-radius: 50%;
}

/* The help links at the bottom of the entry page, with more air above them (review, 2026-10-12). */
.ld .ld-entry-links {
    margin-top: 28px;
}

/* ---- "Etre livre" / "A emporter", each in its colour (Benji, 2026-10-13): the chosen side solid,
   delivery in the main colour's gradient, pickup in the second colour's. ---- */
.ld-entry-mode.active[data-mode="pickup"] {
    background: var(--sheep-grad-second, linear-gradient(180deg, #f39f3f 0%, #ef8839 50%, #e76423 100%));
    box-shadow: 0 4px 12px rgba(var(--sheep-orange-dark-rgb, 231, 100, 35), 0.28);
    text-shadow: 0 1px 1px rgba(var(--sheep-orange-ink-rgb, 169, 74, 28), 0.25);
}

/* The sign-in and register pages (Benji, 2026-10-14): their photo stands on the right across both
   rows, the languages above the title as on the entry page; the top bar's pill, address and search
   have nothing to do here. */
@media (min-width: 768px) {
    .acc-login .ld-entry-art {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* ---- the four languages on one line on phones (Benji, 2026-10-15) ----
   Sign-in, register and the blank home page: "Français English Deutsch Italiano" stay written out
   in full but never wrap; the pills' text and padding follow the screen's width, and the globe
   steps aside below 375 px to leave them the room. */
@media (max-width: 767.98px) {
    .ld-entry-langs {
        flex-wrap: nowrap;
        gap: clamp(3px, 1.2vw, 6px);
        max-width: 100%;
    }

        .ld-entry-langs > svg {
            flex: 0 0 auto;
            margin-right: 0;
        }

    .ld-entry-lang {
        flex: 0 0 auto;
        padding: 0 clamp(6px, 2.4vw, 12px);
        font-size: clamp(0.68rem, 3.2vw, 0.78rem);
        white-space: nowrap;
    }
}

@media (max-width: 374.98px) {
    .ld-entry-langs > svg {
        display: none;
    }
}

/* ---- "Pourquoi Sheep-Me": the secure payment as a wide card (Benji, 2026-10-15) ----
   Moved here from under the home hero: under the four reasons, across the whole grid, the shield
   in a pale green disc and the card washed in the site's colour, centred. */
.ld .ld-why-item.ld-why-pay {
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 22px;
    border-color: var(--sheep-accent-line, #bfe2c5);
    background: linear-gradient(120deg, var(--sheep-accent-soft, #e6f4e8) 0%, var(--ld-card) 75%);
}

    .ld .ld-why-item.ld-why-pay > i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(var(--sheep-accent-rgb), 0.14);
        color: var(--sheep-accent-dark);
        font-size: 1.4rem;
    }

    .ld .ld-why-item.ld-why-pay > div {
        max-width: 620px;
    }

    .ld .ld-why-item.ld-why-pay strong {
        font-size: 1.02rem;
    }

/* Phones (Benji, 2026-10-15): the deliverers' picture as wide as the merchants' one, a square cut
   from its middle ("it does not matter if you crop"). */
@media (max-width: 575.98px) {
    .ld-duo-art.ld-duo-art-wide {
        width: 120px;
        height: 120px;
        object-fit: cover;
        object-position: 50% 50%;
    }
}

/* The blank home's title takes the home hero's words (Benji, 2026-10-15): its second line in the
   orange of the hero's. */
.ld-entry-title em {
    color: var(--sheep-orange-dark) !important;
}

[data-theme="dark"] .ld-entry-title em,
.ld.is-dark .ld-entry-title em {
    color: var(--sheep-orange) !important;
}

/* ---- Benji's picture of the sheep and its box (2026-10-15) ----
   On the merchants' page it takes the hero's corner, wider than the logo it replaces (the picture
   is wide, 16:9), with rounded corners; on phones it opens the page, full width. */
.ld .supplier-info-art {
    width: clamp(280px, 34vw, 460px);
    top: 8px;
    border-radius: 22px;
    filter: none;
    box-shadow: 0 14px 30px rgba(32, 33, 36, 0.12);
}

@media (min-width: 992px) {
    .ld-hero-compact:has(.supplier-info-art) .ld-hero-inner {
        max-width: none;
        padding-right: calc(clamp(280px, 34vw, 460px) + 24px);
    }
}

@media (max-width: 767.98px) {
    .ld .supplier-info-art {
        position: static;
        display: block;
        width: 100%;
        margin: 0 0 14px;
    }
}

/* ---- the sheep-and-box picture centred on its subject (Benji, 2026-10-15: "centre these hero
   pictures better") ----
   The sheep and its box stand right of the picture's middle: every frame that crops it (the tall
   frame of the sign-in and register pages, the blank home's, the phones' banners) keeps them in the
   middle of what shows instead of cutting the sheep at the edge. */
img[src*="landing-box"] {
    object-fit: cover;
    object-position: 80% 55%;
}

/* The sign-in and register picture (connexion-mouton-telephone, Benji 2026-10-15): the sheep and the
   phone stand right of the middle; the tall frame keeps both in view. */
img[src*="connexion-mouton-telephone"] {
    object-fit: cover;
    object-position: 68% 50%;
}