/* ==========================================================================
   Liflio front-end shell (2026-10-09)
   One fluid container system for the desktop header, the page content and the
   footer, so nothing sits in a 1440px centred column with empty bands on wide
   (1920 / 2560px) screens; the sticky compact header; the collapsible sidebar
   rail and its "where you are browsing" location peek.

   Loaded last in layouts/frontend/app.blade.php. Everything layout-related is
   scoped to min-width: 901px: below that the site uses its own mobile chrome
   (global-mob-header, mobile-page-header, bottom nav) and must not change.
   ========================================================================== */

:root {
    --lf-gutter: clamp(16px, 2.4vw, 56px);
    --lf-max: 2560px;
    --lf-header-h: 64px;
    --lf-ticker-h: 0px;
    --lf-sb-pinned: 264px;
    --lf-sb-rail: 76px;
    --lf-sb-w: var(--lf-sb-rail);
    --lf-grad: linear-gradient(150deg, #6685c0 0%, #8ba3d4 45%, #eea59e 100%);
    --lf-coral: #eea59e;
    --lf-coral-2: #E8908A;
    --lf-navy: #3f5f9e;
    --lf-blue: #6685c0;
    --lf-ink: #1A1D2E;
    --lf-line: #e6eaf2;
}
html[data-sb="pinned"] { --lf-sb-w: var(--lf-sb-pinned); }
/* The sale ticker is sticky at top:0 too; the header docks right under it, and moves
   up by itself once the visitor closes the ticker (the node is removed). */
body:has(#liflio-ticker) { --lf-ticker-h: 34px; }

.lf-shell {
    width: 100%;
    max-width: var(--lf-max);
    margin-inline: auto;
    padding-inline: var(--lf-gutter);
    box-sizing: border-box;
}

/* No horizontal scroll, WITHOUT making <body> a scroll container: styles.css and the
   layout set `overflow-x: hidden !important` on html/body, and `hidden` there silently
   disables every position: sticky on the page (header, ticker, sidebar rail). `clip`
   gives the same no-sideways-scroll guarantee. This sheet loads last, so it wins. */
@supports (overflow-x: clip) {
    html, body { overflow-x: clip !important; }
}

/* The "other countries" line inherited the body's grey (#565656) on the dark footer band:
   2:1 contrast. Same white as the rest of the footer, every width. */
.liflio-footer__markets { color: #fff; }

@media (min-width: 901px) {

    /* ---------- Main content: same gutters as the header and footer ---------- */
    #main {
        max-width: var(--lf-max);
        margin-inline: auto;
        /* Bootstrap's .container-fluid / .row / .col add and remove 12px; most pages are
           built from them, so their content lands exactly on the gutter. */
        padding-inline: max(0px, calc(var(--lf-gutter) - 12px));
        box-sizing: border-box;
    }

    /* ---------- Sticky compact header ---------- */
    .desktop-header-wrap {
        position: sticky;
        top: var(--lf-ticker-h);
        z-index: 1040;
        background: rgba(255, 255, 255, .9);
        -webkit-backdrop-filter: saturate(1.4) blur(12px);
        backdrop-filter: saturate(1.4) blur(12px);
        border-bottom: 1px solid rgba(226, 232, 240, .8);
        transition: box-shadow .2s ease, background-color .2s ease;
    }
    /* Condensed on scroll: shadow + a slightly smaller logo, done with transform only so
       the header's height (and therefore the page below it) never moves. */
    html.lf-scrolled .desktop-header-wrap {
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 6px 24px rgba(31, 45, 90, .08);
    }
    .desktop-header-wrap .lf-header.navbar {
        display: block;
        height: auto;
        padding: 0;
        background: transparent;
        margin: 0;
    }
    .lf-header__bar {
        display: flex;
        align-items: center;
        gap: clamp(12px, 1.4vw, 28px);
        height: var(--lf-header-h);
    }
    .lf-header__logo { flex: none; display: inline-flex; align-items: center; }
    .lf-header__logo img {
        height: 34px; width: auto; max-width: 150px; object-fit: contain;
        transform-origin: left center; transition: transform .2s ease;
    }
    html.lf-scrolled .lf-header__logo img { transform: scale(.9); }

    /* In store / Online: compact segmented control (behaviour unchanged). */
    .lf-header__mode { flex: none; padding: 0; margin: 0; }
    .lf-header__mode .new_add {
        width: auto !important; /* dev-style.css pins it to 233px !important */
        display: inline-flex; gap: 2px; padding: 3px; margin: 0;
        border: 1px solid #f3cdc8; border-radius: 999px; background: #fff; overflow: hidden;
    }
    .lf-header__mode .new_add .menual_change {
        width: auto; padding: 6px 14px; margin: 0; border-radius: 999px;
        font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600; line-height: 1.25;
        color: #4b5563; white-space: nowrap; text-decoration: none; text-align: center;
        transition: background-color .15s ease, color .15s ease;
    }
    .lf-header__mode .new_add .menual_change:hover { color: var(--lf-ink); background: #f5f8fc; }
    .lf-header__mode .new_add .menual_change.active {
        background: var(--lf-blue); color: #fff; box-shadow: 0 2px 8px rgba(102, 133, 192, .35);
    }

    /* Search: a tool, not the hero. Pill, sensible width, Ctrl/Cmd+K hint. */
    .lf-header .lf-search {
        position: relative; flex: 1 1 320px; min-width: 180px; max-width: 560px; width: auto; margin: 0;
    }
    .lf-search .form-group.has-search { position: relative; margin: 0; display: flex; align-items: center; }
    .lf-search .form-group.has-search > .fa-search {
        position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
        color: #8a94a8; font-size: 14px; pointer-events: none; margin: 0;
    }
    .lf-header .lf-search .has-search input.form-control {
        height: 40px !important; min-height: 0; padding: 0 64px 0 40px; border-radius: 999px;
        border: 1px solid var(--lf-line); background: #f6f8fc; color: #1f2937;
        font-size: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }
    .lf-header .lf-search .has-search input.form-control::placeholder { color: #8a94a8; }
    .lf-header .lf-search .has-search input.form-control:hover { border-color: #cfd8e8; }
    .lf-header .lf-search .has-search input.form-control:focus {
        background: #fff; border-color: var(--lf-blue);
        box-shadow: 0 0 0 4px rgba(102, 133, 192, .16), 0 6px 18px rgba(31, 45, 90, .08); outline: none;
    }
    .lf-search__kbd {
        position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
        padding: 2px 7px; border-radius: 6px; border: 1px solid #dde3ee; background: #fff;
        color: #6b7280; font: 600 11px/1.5 'DM Sans', sans-serif; letter-spacing: .02em;
        box-shadow: none; pointer-events: none; transition: opacity .15s ease;
    }
    .lf-search input:focus ~ .lf-search__kbd,
    .lf-search input:not(:placeholder-shown) ~ .lf-search__kbd { opacity: 0; }

    /* Utility links */
    .lf-header__actions {
        margin-left: auto; flex: none; display: flex; align-items: center;
        gap: clamp(8px, 1vw, 18px); white-space: nowrap;
        font-family: 'DM Sans', sans-serif; font-size: 13.5px;
    }
    .lf-header__actions > a,
    .lf-header__actions .logout_user { margin: 0; }
    .lf-header__actions > a { color: var(--lf-navy); font-weight: 500; text-decoration: none; padding: 7px 4px; border-radius: 8px; }
    .lf-header__actions > a:hover { color: var(--lf-ink); text-decoration: none; }
    .lf-header__actions > a.header-merchant-link { color: #d9736a; }
    .lf-header__actions > a.header-login-link {
        padding: 7px 14px; border-radius: 999px; border: 1px solid #cdd7ea; color: var(--lf-navy); background: #fff;
    }
    .lf-header__actions > a.header-login-link:hover { border-color: var(--lf-blue); }
    .lf-header__actions > a.header-login-link + a {
        padding: 8px 16px; border-radius: 999px; color: #fff; font-weight: 600;
        background: linear-gradient(135deg, var(--lf-coral), var(--lf-coral-2));
        box-shadow: 0 2px 10px rgba(238, 165, 158, .4);
    }
    .lf-header__actions > a.header-login-link + a:hover { color: #fff; filter: brightness(1.04); }

    .lf-header__bar--my-list .lf-header__mode,
    .lf-header__bar--my-list .lf-search { display: none; }

    /* Tight desktop widths: drop the shortcut hint and the merchant link's icon first. */
    @media (max-width: 1180px) {
        .lf-search__kbd { display: none; }
        .lf-header .lf-search .has-search input.form-control { padding-right: 16px; }
        .lf-header__actions { font-size: 13px; }
        .lf-header__actions > a.header-merchant-link::before { display: none; }
    }

    /* ---------- Footer: full-bleed band, content on the shell ---------- */
    .lf-footer-wrap { width: 100%; }
    .lf-footer-wrap .liflio-footer__body {
        padding: 56px var(--lf-gutter) 28px;
    }
    .lf-footer-wrap .liflio-footer__body > * {
        max-width: calc(var(--lf-max) - 2 * var(--lf-gutter));
        margin-left: auto; margin-right: auto;
    }
    .lf-footer-wrap .liflio-footer__columns {
        display: grid;
        grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
        gap: 36px clamp(24px, 2.6vw, 56px);
    }
    .lf-footer-wrap .liflio-footer__brand { width: auto; max-width: 360px; }
    .lf-footer-wrap .liflio-footer__col--newsletter { min-width: 0; }
    @media (min-width: 1600px) {
        /* Brand + 7 columns in ONE row on 1920 / 2560px screens. */
        .lf-footer-wrap .liflio-footer__columns:has(> :nth-child(8):last-child) {
            grid-template-columns: minmax(240px, 1.3fr) repeat(5, minmax(130px, 1fr)) minmax(240px, 1.5fr) minmax(130px, 1fr);
        }
        .lf-footer-wrap .liflio-footer__col-title { font-size: 15px; }
        .lf-footer-wrap .liflio-footer__col ul li a { font-size: 14px; }
    }
    .lf-footer-wrap .liflio-footer__divider { margin-top: 40px; }

    /* ---------- Sidebar: pinned column or icon rail ---------- */
    .row:has(> .sidebar_side) { flex-wrap: nowrap; }
    /* The column keeps Bootstrap's 12px left padding (that is what puts the panel on the
       shell gutter), so it is 12px wider than the panel. */
    .row > .sidebar_side {
        flex: 0 0 calc(var(--lf-sb-w) + 12px);
        width: calc(var(--lf-sb-w) + 12px);
        max-width: calc(var(--lf-sb-w) + 12px);
        padding-left: 12px;
        padding-right: 0;
        position: relative;
        z-index: 1030; /* above page content, below the sticky header */
        transition: flex-basis .25s ease, width .25s ease, max-width .25s ease;
    }
    .row:has(> .sidebar_side) > .sidebar_side ~ [class*="col-"] {
        flex: 1 1 0; width: auto; max-width: none; min-width: 0;
        padding-left: clamp(16px, 1.6vw, 28px);
    }

    .sb-sticky {
        position: sticky;
        top: calc(var(--lf-ticker-h) + var(--lf-header-h) + 12px);
        margin-top: 8px;
        width: var(--lf-sb-w);
    }
    .sb-sidebar-inner {
        position: relative;
        width: var(--lf-sb-w);
        max-height: calc(100vh - var(--lf-ticker-h) - var(--lf-header-h) - 28px);
        overflow-x: hidden; overflow-y: auto;
        scrollbar-width: thin; scrollbar-color: #d5dbe7 transparent;
        padding: 12px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #edf0f5;
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
        transition: width .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease;
    }
    /* Rail opened by hover / keyboard focus: an overlay, the column stays 76px wide. */
    html[data-sb="rail"] .sb-sidebar-inner.is-open {
        width: var(--lf-sb-pinned);
        box-shadow: 0 18px 48px rgba(31, 45, 90, .18), 0 2px 6px rgba(31, 45, 90, .06);
    }

    .sb-label {
        transition: opacity .16s ease;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    }
    html[data-sb="rail"] .sb-sidebar-inner:not(.is-open) .sb-label { opacity: 0; }
    html[data-sb="rail"] .sb-sidebar-inner:not(.is-open) { scrollbar-width: none; }
    html[data-sb="rail"] .sb-sidebar-inner:not(.is-open)::-webkit-scrollbar { display: none; }

    .sb-top { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
    .sb-loc {
        flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
        padding: 0; border-radius: 12px; cursor: pointer;
    }
    .sb-loc__icon {
        position: relative; flex: none; width: 34px; height: 34px; margin-left: 7px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: #fdf0ee; color: #d9736a; font-size: 15px;
    }
    .sb-loc__icon::after { /* the "ping" ring */
        content: ''; position: absolute; inset: -1px; border-radius: 50%;
        border: 2px solid var(--lf-coral); opacity: 0; pointer-events: none;
    }
    .sb-loc__text { flex: 1; font: 700 15px/1.2 'DM Sans', sans-serif; color: var(--lf-ink); }
    .sb-loc:hover .sb-loc__text { color: var(--lf-navy); }

    .sb-pin {
        flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid transparent;
        background: transparent; color: #8a94a8; font-size: 13px; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        transition: background-color .15s ease, color .15s ease, transform .2s ease, opacity .15s ease;
    }
    .sb-pin:hover { background: #f2f5fb; color: var(--lf-navy); }
    .sb-pin i { transform: rotate(45deg); transition: transform .2s ease; }
    html[data-sb="pinned"] .sb-pin { color: var(--lf-blue); }
    html[data-sb="pinned"] .sb-pin i { transform: rotate(0deg); }
    html[data-sb="rail"] .sb-sidebar-inner:not(.is-open) .sb-pin { opacity: 0; pointer-events: none; }

    .sb-all-btn {
        display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px;
        padding: 10px 16px; border-radius: 12px; border: none; cursor: pointer; margin-bottom: 6px;
        background: var(--lf-grad); text-decoration: none; transition: filter .2s ease;
        box-shadow: 0 4px 14px rgba(102, 133, 192, .25);
    }
    .sb-all-btn:hover { filter: brightness(1.05); text-decoration: none; }
    .sb-all-btn i { color: #fff; font-size: 15px; flex: none; }
    .sb-all-btn span { color: #fff; font: 600 14px 'DM Sans', sans-serif; }

    .sb-sep { height: 1px; background: #F3F4F6; margin: 8px 0; }
    .sb-cat-label { font: 700 11px 'DM Sans', sans-serif; color: #9CA3AF; letter-spacing: 1px; padding: 8px 8px 6px; white-space: nowrap; overflow: hidden; }
    .sb-cats { display: flex; flex-direction: column; gap: 2px; }
    .sb-cat-item {
        display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 12px;
        text-decoration: none; color: #374151; transition: background-color .15s ease, color .15s ease;
    }
    .sb-cat-item:hover { background: #F5F8FC; text-decoration: none; color: var(--lf-ink); }
    .sb-cat-item.sb-active { background: var(--lf-blue); color: #fff !important; }
    .sb-cat-item.sb-active .sb-cat-icon { background: rgba(255, 255, 255, .2) !important; }
    .sb-cat-item.sb-active .sb-cat-icon i,
    .sb-cat-item.sb-active .sb-cat-name { color: #fff !important; }
    .sb-cat-icon {
        width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
    }
    .sb-cat-icon i { font-size: 15px; }
    .sb-cat-name { flex: 1; font: 500 14px 'DM Sans', sans-serif; color: #374151; }

    /* ---------- Location peek: "Vous naviguez à · Bordeaux, France" ---------- */
    .sb-peek {
        position: absolute; z-index: 2;
        top: 13px; left: calc(var(--lf-sb-rail) - 8px);
        display: inline-flex; align-items: baseline; gap: 6px;
        padding: 8px 14px 8px 16px; border-radius: 999px;
        background: var(--lf-grad); color: #fff; white-space: nowrap;
        font-family: 'DM Sans', sans-serif; box-shadow: 0 10px 28px rgba(63, 95, 158, .28);
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateX(-14px) scaleX(.6); transform-origin: left center;
    }
    .sb-peek__label { font-size: 11px; font-weight: 500; opacity: .9; }
    .sb-peek__city { font-size: 13.5px; font-weight: 700; }
    html[data-sb="rail"] .sb-sticky.is-peeking .sb-peek {
        visibility: visible;
        animation: lf-peek 4.2s cubic-bezier(.2, .9, .25, 1.1) both;
    }
    .sb-sticky.is-peeking .sb-loc__icon { animation: lf-pin-bounce .9s ease .1s both; }
    .sb-sticky.is-peeking .sb-loc__icon::after { animation: lf-ping 1.4s ease-out .15s 2; }
    @keyframes lf-peek {
        0%   { opacity: 0; transform: translateX(-14px) scaleX(.6); }
        10%  { opacity: 1; transform: translateX(0) scaleX(1.03); }
        14%  { transform: translateX(0) scaleX(1); }
        86%  { opacity: 1; transform: translateX(0) scaleX(1); }
        100% { opacity: 0; transform: translateX(-14px) scaleX(.6); }
    }
    @keyframes lf-pin-bounce {
        0%, 100% { transform: translateY(0); }
        30% { transform: translateY(-6px); }
        55% { transform: translateY(0); }
        72% { transform: translateY(-2px); }
    }
    @keyframes lf-ping {
        0%   { opacity: .7; transform: scale(1); }
        100% { opacity: 0; transform: scale(1.7); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .desktop-header-wrap, .lf-header__logo img, .row > .sidebar_side, .sb-sidebar-inner, .sb-label, .sb-pin, .sb-pin i { transition: none !important; }
    html.lf-scrolled .lf-header__logo img { transform: none; }
    .sb-peek, .sb-loc__icon, .sb-loc__icon::after { animation: none !important; }
}