{"id":111959,"date":"2025-01-02T20:34:04","date_gmt":"2025-01-03T01:34:04","guid":{"rendered":"https:\/\/letomcafe.com\/?page_id=111959"},"modified":"2026-05-14T21:20:46","modified_gmt":"2026-05-15T01:20:46","slug":"cafes","status":"publish","type":"page","link":"https:\/\/lepetitroast.com\/fr\/coffees\/","title":{"rendered":"Caf\u00e9s"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1320.8px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:25px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:25px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><!-- Avada code block: shop\/index.html -- self-contained, paste as-is -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Inter+Tight:wght@300..700&family=Caveat:wght@500;600&display=swap\">\n\n<script>\n    \/\/ Force correct viewport meta tag \u2014 overwrites any existing one that may be wrong\n    (function(){\n        var existing = document.querySelector('meta[name=\"viewport\"]');\n        var content = 'width=device-width, initial-scale=1, viewport-fit=cover';\n        if (existing) {\n            existing.setAttribute('content', content);\n        } else {\n            var m = document.createElement('meta');\n            m.name = 'viewport';\n            m.setAttribute('content', content);\n            document.head.appendChild(m);\n        }\n    })();\n<\/script>\n\n<script id=\"lpr-strip-avada-typography\">\n    \/* Avada's Fusion Builder adds .fusion-responsive-typography-calculated + inline\n       --fontSize \/ line-height to every H1\/H2\/H3 inside our content, server-side.\n       That overrides our mobile-first CSS. We strip it on our .lpr elements only,\n       then re-strip on resize in case Avada's JS re-applies. *\/\n    (function(){\n        function strip(){\n            document.querySelectorAll('.lpr .fusion-responsive-typography-calculated').forEach(function(el){\n                el.classList.remove('fusion-responsive-typography-calculated');\n                el.style.removeProperty('--fontSize');\n                el.style.removeProperty('line-height');\n                el.removeAttribute('data-fontsize');\n                el.removeAttribute('data-lineheight');\n            });\n        }\n        strip();\n        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', strip);\n        window.addEventListener('load', strip);\n        var t;\n        window.addEventListener('resize', function(){ clearTimeout(t); t = setTimeout(strip, 100); });\n    })();\n<\/script>\n\n<style id=\"lpr-avada-container-escape\">\n    \/* Pure-CSS escape from Avada's boxed container chain. Climbs up from .lpr\n       via :has() and strips padding\/margin\/width\/overflow at every level\n       (main, .fusion-row, .fusion-fullwidth, .fusion-builder-row,\n       .fusion-layout-column, .fusion-column-wrapper, .fusion-text). *\/\n\n    main.clearfix.width-100:has(.lpr),\n    main.clearfix.width-100:has(.lpr) > .fusion-row {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n        margin-left: 0 !important;\n        margin-right: 0 !important;\n        max-width: 100% !important;\n        width: 100% !important;\n    }\n\n    .fusion-fullwidth:has(.lpr),\n    .fusion-builder-row:has(.lpr),\n    .fusion-layout-column:has(.lpr),\n    .fusion-column-wrapper:has(.lpr),\n    .fusion-text:has(.lpr) {\n        overflow: visible !important;\n        padding: 0 !important;\n        margin: 0 !important;\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n        margin-left: 0 !important;\n        margin-right: 0 !important;\n        max-width: 100% !important;\n        width: 100% !important;\n    }\n<\/style>\n\n<style id=\"lpr-inner-width-safety\">\n    html, body {\n        max-width: 100vw !important;\n        overflow-x: hidden !important;\n    }\n\n    .lpr .container {\n        width: 100% !important;\n        box-sizing: border-box !important;\n    }\n\n    @media (max-width: 1240px) {\n        .lpr .principle-grid {\n            max-width: 100% !important;\n        }\n    }\n\n    .lpr .about-hero-inner > *,\n    .lpr .hero-inner > *,\n    .lpr .principle-grid > *,\n    .lpr .thomas-grid > *,\n    .lpr .featured-grid > *,\n    .lpr .cards-grid > *,\n    .lpr .picks-grid > *,\n    .lpr .how-grid > *,\n    .lpr .why-grid > *,\n    .lpr .story-grid > *,\n    .lpr .shop-grid > * {\n        min-width: 0 !important;\n        max-width: 100% !important;\n    }\n\n    .lpr p,\n    .lpr h1, .lpr h2, .lpr h3, .lpr h4, .lpr h5, .lpr h6,\n    .lpr li, .lpr blockquote {\n        overflow-wrap: break-word !important;\n        word-wrap: break-word !important;\n        min-width: 0 !important;\n    }\n\n    .lpr > section {\n        width: 100% !important;\n        max-width: 100% !important;\n        box-sizing: border-box !important;\n    }\n<\/style>\n\n<style id=\"lpr-mobile-safety\">\n    .lpr, .lpr * { box-sizing: border-box; }\n    .lpr { max-width: 100%; }\n    .lpr img, .lpr svg { max-width: 100%; height: auto; }\n    .lpr h1, .lpr h2, .lpr h3, .lpr p {\n        overflow-wrap: break-word;\n        word-break: normal;\n    }\n<\/style>\n\n<style id=\"avada-hardening\">\n    .lpr, .lpr * { box-sizing: border-box; }\n    .lpr { display: block; width: 100%; max-width: none; }\n\n    .lpr h1, .lpr h2, .lpr h3, .lpr h4, .lpr h5, .lpr h6,\n    .lpr p, .lpr ul, .lpr ol, .lpr figure, .lpr blockquote {\n        margin-top: 0;\n        margin-bottom: 0;\n    }\n    .lpr ul, .lpr ol { padding-left: 0; list-style: none; }\n\n    .lpr img { max-width: 100%; height: auto; display: block; }\n\n    .lpr a { text-decoration: none; color: inherit; }\n    .lpr .btn, .lpr .btn-primary, .lpr .btn-ghost, .lpr .btn-dark,\n    .lpr .pcard-add, .lpr .link-u { text-decoration: none !important; }\n\n    .lpr section { width: 100%; max-width: none; display: block; }\n\n    .lpr .shop-grid { display: grid !important; }\n<\/style>\n\n<script>\n    \/\/ Language detection \u2014 reads <html lang=\"...\"> (WP sets this via Polylang\/WPML).\n    var isFr = (document.documentElement.lang || '').toLowerCase().indexOf('fr') === 0;\n<\/script>\n\n<style id=\"lpr-bilingual\">\n    .lpr[data-lang=\"en\"] .lpr-fr,\n    .lpr[data-lang=\"fr\"] .lpr-en { display: none !important; }\n<\/style>\n\n<style>\n    \/* =========================================================\n       Le Petit Roast \u2014 design tokens & shared styles\n       ========================================================= *\/\n\n    :root {\n        --cream-50:  #FBF4E3;\n        --cream-100: #F5E9CC;\n        --cream-200: #ECDCAE;\n        --cream-300: #D8C088;\n        --honey-500: #E8C576;\n        --honey-300: #F4DCA6;\n        --roast-900: #2A1B10;\n        --roast-800: #3D2A1D;\n        --roast-700: #5A3E2A;\n        --roast-600: #7A5A40;\n        --roast-500: #9C7A5C;\n        --ember-700: #A34A1A;\n        --ember-600: #C4601F;\n        --ember-500: #DE813E;\n        --ember-300: #F0B37F;\n\n        --bg: var(--cream-50);\n        --ink: var(--roast-900);\n        --ink-2: var(--roast-700);\n        --ink-muted: var(--roast-500);\n        --line: var(--cream-300);\n\n        --font-display: \"Fraunces\", Georgia, serif;\n        --font-body: \"Inter Tight\", -apple-system, system-ui, sans-serif;\n        --font-hand: \"Caveat\", cursive;\n\n        --r-md: 12px;\n        --r-lg: 20px;\n        --r-pill: 999px;\n\n        --shadow-sm: 0 1px 2px rgba(61, 42, 29, 0.08);\n        --shadow-md: 0 10px 28px -10px rgba(61, 42, 29, 0.22);\n        --shadow-lg: 0 24px 56px -18px rgba(61, 42, 29, 0.3);\n\n        --container: 1240px;\n    }\n\n    * { box-sizing: border-box; }\n    html, body { margin: 0; padding: 0; }\n    body {\n        background: var(--bg);\n        color: var(--ink);\n        font-family: var(--font-body);\n        font-size: 17px;\n        line-height: 1.6;\n        -webkit-font-smoothing: antialiased;\n        text-rendering: optimizeLegibility;\n    }\n    img { max-width: 100%; display: block; }\n    a { color: inherit; text-decoration: none; }\n    button { font: inherit; cursor: pointer; border: none; background: none; }\n    ::selection { background: var(--ember-300); color: var(--roast-900); }\n\n    .container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }\n    @media (max-width: 700px) { .container { padding: 0 20px; } }\n    @media (max-width: 430px) { .container { padding: 0 16px; } }\n\n    .hand {\n        font-family: var(--font-hand);\n        font-weight: 600;\n        color: var(--ember-600);\n        display: inline-block;\n        transform: rotate(-2deg);\n    }\n\n    \/* Buttons *\/\n    .btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        padding: 15px 28px;\n        font-family: var(--font-body);\n        font-size: 16px;\n        font-weight: 600;\n        border: 1.5px solid transparent;\n        border-radius: var(--r-pill);\n        cursor: pointer;\n        transition: all 220ms cubic-bezier(0.2, 0.7, 0.2, 1);\n        line-height: 1;\n        white-space: nowrap;\n    }\n    .btn:hover { transform: translateY(-1px); }\n    .btn svg { width: 16px; height: 16px; transition: transform 260ms cubic-bezier(0.2,0.7,0.2,1); }\n    .btn:hover svg { transform: translateX(3px); }\n    .btn-primary { background: var(--ember-600); color: #fff; }\n    .btn-primary:hover { background: var(--ember-700); }\n    .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }\n    .btn-ghost:hover { background: var(--ink); color: var(--cream-50); }\n\n    .link-u {\n        display: inline-flex;\n        align-items: baseline;\n        gap: 6px;\n        font-weight: 600;\n        color: var(--ink);\n        position: relative;\n        padding-bottom: 2px;\n    }\n    .link-u::after {\n        content: \"\";\n        position: absolute; left: 0; right: 0; bottom: 0;\n        height: 2px;\n        background: var(--ember-500);\n        transform-origin: left;\n        transition: transform 260ms cubic-bezier(0.2,0.7,0.2,1);\n    }\n\n    \/* ===== Section generic ===== *\/\n    .sec { padding: 96px 0; }\n    .sec-head { margin-bottom: 56px; max-width: 720px; }\n    .sec-label { display: inline-block; font-size: 13px; font-weight: 600; color: var(--ember-600); margin-bottom: 12px; }\n    .sec h2 {\n        font-family: var(--font-display);\n        font-weight: 400;\n        font-size: clamp(32px, 4.5vw, 52px);\n        line-height: 1.05;\n        letter-spacing: -0.025em;\n        margin: 0 0 16px;\n        color: var(--ink);\n    }\n    .sec .lead {\n        font-size: 19px;\n        line-height: 1.55;\n        color: var(--ink-2);\n        max-width: 56ch;\n        margin: 0;\n    }\n\n    \/* ===== Quiz teaser ===== *\/\n    .quiz {\n        background: var(--cream-100);\n        color: var(--ink);\n    }\n    .quiz-card {\n        max-width: 760px;\n        margin: 0 auto;\n        text-align: center;\n        background: var(--cream-50);\n        border: 1px solid rgba(61, 42, 29, 0.08);\n        border-radius: var(--r-lg);\n        padding: 72px 56px;\n        box-shadow: 0 30px 60px -40px rgba(61, 42, 29, 0.25);\n    }\n    .quiz-card .sec-label { justify-content: center; display: inline-flex; margin-bottom: 14px; }\n    .quiz-card h2 {\n        color: var(--ink);\n        font-family: var(--font-display);\n        font-weight: 400;\n        font-size: clamp(32px, 5vw, 56px);\n        line-height: 1.02;\n        letter-spacing: -0.03em;\n        margin: 0 0 20px;\n    }\n    .quiz-card h2 .hand { color: var(--ember-600); }\n    .quiz-card .lead {\n        font-size: 18px;\n        color: var(--ink-2);\n        margin: 0 auto 32px;\n        max-width: 48ch;\n    }\n    .quiz-foot {\n        margin-top: 18px;\n        font-size: 14px;\n        color: var(--ink-muted);\n    }\n\n    @media (max-width: 700px) {\n        .sec { padding: 64px 0; }\n        .sec-head { margin-bottom: 36px; }\n        .quiz-card { padding: 48px 24px; }\n        .quiz-card .lead { font-size: 16.5px; line-height: 1.55; }\n    }\n    @media (max-width: 430px) {\n        .sec { padding: 56px 0; }\n        .quiz-card { padding: 36px 20px; border-radius: 16px; }\n        .quiz-card .lead { margin-bottom: 24px; }\n        .quiz-foot { margin-top: 14px; font-size: 13px; }\n        \/* Full-width CTA on small phones for thumb reach *\/\n        .quiz-card .btn {\n            display: flex;\n            justify-content: center;\n            width: 100%;\n            padding: 16px 24px;\n            min-height: 52px;\n            box-sizing: border-box;\n        }\n    }\n<\/style>\n\n<style>\n    \/* =========================================================\n       Shop \/ Coffees listing \u2014 base\n       ========================================================= *\/\n\n    \/* ---------- Hero ---------- *\/\n    .shop-hero {\n        background: linear-gradient(165deg, #6B3A1E 0%, #4A2615 100%);\n        padding: 48px 16px 40px;\n        text-align: center;\n        position: relative;\n        overflow: hidden;\n    }\n    @media (min-width: 600px) { .shop-hero { padding: 56px 24px 48px; } }\n    @media (min-width: 900px) { .shop-hero { padding: 64px 0 56px; } }\n    .shop-hero::before {\n        content: \"\";\n        position: absolute;\n        left: 50%; top: 70%;\n        width: 520px; height: 520px;\n        transform: translate(-50%, -50%);\n        background: radial-gradient(circle, rgba(240, 179, 127, 0.14), transparent 65%);\n        pointer-events: none;\n    }\n    .shop-hero-inner {\n        position: relative;\n        max-width: 760px;\n        margin: 0 auto;\n    }\n    .shop-eyebrow {\n        font-family: var(--font-body);\n        font-size: 12px;\n        font-weight: 600;\n        letter-spacing: 0.12em;\n        text-transform: uppercase;\n        color: var(--ember-300);\n        margin-bottom: 16px;\n    }\n    @media (min-width: 900px) { .shop-eyebrow { font-size: 13px; margin-bottom: 20px; } }\n    .shop-hero h1 {\n        font-family: var(--font-display);\n        font-weight: 400;\n        font-size: clamp(32px, 7.5vw, 80px);\n        line-height: 1.02;\n        letter-spacing: -0.035em;\n        color: var(--cream-50);\n        margin: 0 0 20px;\n        overflow-wrap: break-word;\n        text-wrap: pretty;\n    }\n    .shop-hero h1 .hand {\n        font-family: var(--font-hand);\n        font-weight: 600;\n        color: var(--ember-300);\n        font-style: normal;\n        font-size: 1em;\n        display: inline-block;\n        transform: rotate(-2deg);\n    }\n    .shop-lede {\n        font-family: var(--font-display);\n        font-weight: 300;\n        font-style: italic;\n        font-size: 17px;\n        line-height: 1.5;\n        color: rgba(251, 244, 227, 0.82);\n        max-width: 56ch;\n        margin-left: auto;\n        margin-right: auto;\n    }\n    @media (min-width: 600px) { .shop-lede { font-size: 19px; } }\n    @media (min-width: 900px) { .shop-lede { font-size: 22px; } }\n\n    \/* ---------- Filters ---------- *\/\n    .shop-filters {\n        background: var(--cream-50);\n        padding: 0;\n        border-bottom: 1px solid rgba(61, 42, 29, 0.08);\n    }\n    .shop-filters-details > summary { list-style: none; }\n    .shop-filters-details > summary::-webkit-details-marker { display: none; }\n    .shop-filters-bar {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 10px 0;\n        cursor: pointer;\n        user-select: none;\n        flex-wrap: wrap;\n    }\n    .sf-chev {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 22px;\n        height: 22px;\n        border-radius: 50%;\n        background: var(--ink);\n        color: var(--cream-50);\n        font-size: 10px;\n        transition: transform 180ms;\n        flex-shrink: 0;\n    }\n    .shop-filters-details[open] .sf-chev { transform: rotate(90deg); }\n    .sf-title {\n        font-family: var(--font-body);\n        font-size: 11px;\n        font-weight: 700;\n        letter-spacing: 0.14em;\n        text-transform: uppercase;\n        color: var(--ink);\n    }\n    .sf-active {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        font-family: var(--font-body);\n        font-size: 11.5px;\n        font-weight: 600;\n        color: var(--ember-600, #b34a1f);\n        background: rgba(217, 119, 87, 0.12);\n        border: 1px solid rgba(217, 119, 87, 0.28);\n        padding: 4px 10px;\n        border-radius: 999px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: 60%;\n    }\n    .sf-active:empty { display: none; }\n    .sf-spacer { flex: 1; }\n    .sf-reset {\n        font-family: var(--font-body);\n        font-size: 11px;\n        font-weight: 700;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: var(--cream-50);\n        background: var(--ember-500);\n        border: 1.5px solid var(--ember-500);\n        border-radius: 999px;\n        padding: 7px 16px;\n        cursor: pointer;\n        transition: all 180ms;\n        box-shadow: 0 2px 8px rgba(217, 119, 87, 0.25);\n    }\n    .sf-reset:hover {\n        background: var(--ink);\n        border-color: var(--ink);\n        box-shadow: 0 2px 8px rgba(61, 42, 29, 0.2);\n    }\n    .sf-reset::before {\n        content: \"<-\";\n        margin-right: 6px;\n        font-size: 14px;\n        display: inline-block;\n    }\n    .shop-filters-inner {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        padding: 0 0 12px;\n    }\n    .filter-group {\n        display: grid;\n        grid-template-columns: 92px 1fr;\n        align-items: center;\n        column-gap: 16px;\n        row-gap: 8px;\n    }\n    .filter-group + .filter-group { padding-top: 6px; border-top: 1px dashed rgba(61, 42, 29, 0.12); }\n    .filter-chips {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px 8px;\n    }\n    .filter-label {\n        font-family: var(--font-body);\n        font-size: 10px;\n        font-weight: 700;\n        letter-spacing: 0.12em;\n        text-transform: uppercase;\n        color: var(--ink-muted);\n    }\n    .filter-summary {\n        display: flex;\n        align-items: center;\n        padding-top: 8px;\n        border-top: 1px dashed rgba(61, 42, 29, 0.12);\n    }\n    .filter-count { font-family: var(--font-body); font-size: 13px; color: var(--ink-muted); }\n    .chip {\n        font-family: var(--font-body);\n        font-size: 11px;\n        font-weight: 500;\n        color: var(--ink-2);\n        background: transparent;\n        border: 1.5px solid rgba(61, 42, 29, 0.15);\n        border-radius: 999px;\n        padding: 4px 10px;\n        cursor: pointer;\n        transition: all 180ms;\n    }\n    .chip:hover {\n        border-color: var(--ember-500);\n        color: var(--ink);\n    }\n    .chip.is-on {\n        background: var(--ink);\n        border-color: var(--ink);\n        color: var(--cream-50);\n    }\n    .switch {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        cursor: pointer;\n        user-select: none;\n    }\n    .switch input { position: absolute; opacity: 0; pointer-events: none; }\n    .switch-track {\n        width: 36px; height: 20px;\n        background: rgba(61, 42, 29, 0.15);\n        border-radius: 999px;\n        position: relative;\n        transition: background 180ms;\n        flex-shrink: 0;\n    }\n    .switch-dot {\n        position: absolute;\n        top: 2px; left: 2px;\n        width: 16px; height: 16px;\n        background: var(--cream-50);\n        border-radius: 999px;\n        transition: transform 180ms;\n        box-shadow: 0 1px 3px rgba(0,0,0,0.2);\n    }\n    .switch input:checked + .switch-track { background: var(--ember-500); }\n    .switch input:checked + .switch-track .switch-dot { transform: translateX(16px); }\n    .switch-label {\n        font-family: var(--font-body);\n        font-size: 12.5px;\n        font-weight: 500;\n        color: var(--ink-2);\n    }\n    .filter-count {\n        margin-left: auto;\n        font-family: var(--font-display);\n        font-style: italic;\n        font-size: 13px;\n        color: var(--ink-muted);\n    }\n\n    \/* ---------- Grid ---------- *\/\n    .shop-grid-sec { background: var(--cream-50); padding: 72px 0 96px; }\n    .shop-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 56px 40px;\n    }\n    .coffee-card {\n        display: flex;\n        flex-direction: column;\n        text-decoration: none;\n        color: inherit;\n        border: none;\n        background: transparent;\n        transition: transform 300ms ease;\n    }\n    .coffee-card:hover { transform: translateY(-4px); }\n\n    .card-photo {\n        aspect-ratio: 4 \/ 5;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-bottom: 20px;\n        filter: drop-shadow(0 24px 36px rgba(61, 42, 29, 0.16))\n        drop-shadow(0 6px 12px rgba(61, 42, 29, 0.08));\n    }\n    .card-photo img {\n        width: 100%; height: 100%;\n        object-fit: contain;\n        display: block;\n        transition: transform 400ms ease;\n    }\n    .coffee-card:hover .card-photo img { transform: scale(1.02); }\n    .card-badge {\n        position: absolute;\n        top: 12px; right: 10%;\n        z-index: 2;\n        background: var(--ember-500);\n        color: var(--cream-50);\n        font-family: var(--font-hand);\n        font-weight: 600;\n        font-size: 18px;\n        padding: 6px 14px;\n        border-radius: 999px;\n        transform: rotate(6deg);\n        box-shadow: 0 6px 16px -6px rgba(222, 129, 62, 0.5);\n    }\n    .card-badge.badge-plum {\n        background: #8a2e45;\n        box-shadow: 0 6px 16px -6px rgba(138, 46, 69, 0.55);\n    }\n    .card-badge.badge-blend {\n        background: var(--roast-900);\n        box-shadow: 0 6px 16px -6px rgba(61, 42, 29, 0.5);\n    }\n\n    \/* ---------- Card body ---------- *\/\n    .card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }\n    .card-role {\n        font-family: var(--font-hand);\n        font-size: 20px;\n        color: var(--ember-600);\n        transform: rotate(-3deg);\n        display: inline-block;\n        align-self: flex-start;\n        line-height: 1;\n        margin-bottom: 2px;\n        white-space: nowrap;\n    }\n    .card-body h3 {\n        font-family: var(--font-display);\n        font-weight: 400;\n        font-size: 28px;\n        line-height: 1;\n        letter-spacing: -0.02em;\n        color: var(--ink);\n        margin: 0;\n    }\n    .card-origin {\n        font-family: var(--font-body);\n        font-size: 13px;\n        font-weight: 500;\n        letter-spacing: 0.06em;\n        text-transform: uppercase;\n        color: var(--ink-muted);\n        margin-bottom: 4px;\n    }\n    .notes {\n        display: flex;\n        flex-wrap: nowrap;\n        gap: 6px;\n        margin-bottom: 8px;\n        overflow: hidden;\n    }\n    .note {\n        font-family: var(--font-body);\n        font-size: 11px;\n        font-weight: 500;\n        color: var(--ink-2);\n        background: rgba(61, 42, 29, 0.06);\n        padding: 3px 9px;\n        border-radius: 999px;\n        white-space: nowrap;\n        flex-shrink: 0;\n    }\n\n    .card-foot {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 10px;\n        padding-top: 14px;\n        margin-top: 4px;\n        border-top: 1px solid rgba(61, 42, 29, 0.08);\n    }\n    .roast-meter {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n    .rm-label {\n        font-family: var(--font-body);\n        font-size: 11px;\n        font-weight: 600;\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        color: var(--ink-muted);\n    }\n    .rm-value {\n        font-family: var(--font-body);\n        font-size: 13px;\n        font-weight: 600;\n        letter-spacing: 0.04em;\n        color: var(--ink);\n        text-transform: capitalize;\n        white-space: nowrap;\n    }\n    .card-price {\n        font-family: var(--font-display);\n        font-weight: 500;\n        font-size: 20px;\n        color: var(--ink);\n        letter-spacing: -0.01em;\n        display: inline-flex;\n        align-items: baseline;\n        gap: 6px;\n        flex-wrap: wrap;\n    }\n    .price-from {\n        font-family: var(--font-body);\n        font-style: normal;\n        font-weight: 500;\n        font-size: 11px;\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        color: var(--ink-muted);\n    }\n    .price-sizes {\n        font-family: var(--font-body);\n        font-weight: 500;\n        font-size: 11px;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: var(--ink-muted);\n        margin-left: 2px;\n    }\n    .card-cta {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        margin-top: auto;\n        padding-top: 10px;\n        font-family: var(--font-body);\n        font-size: 14px;\n        font-weight: 600;\n        color: var(--ember-600);\n        letter-spacing: 0.01em;\n        border-bottom: 1px solid transparent;\n        align-self: flex-start;\n        transition: gap 200ms ease;\n    }\n    .card-cta svg { width: 14px; height: 14px; }\n    .coffee-card:hover .card-cta { gap: 10px; }\n\n    \/* ---------- Empty state ---------- *\/\n    .shop-empty {\n        text-align: center;\n        padding: 80px 0 40px;\n        font-family: var(--font-body);\n        color: var(--ink-2);\n    }\n    .shop-empty p { font-size: 16px; }\n    .shop-empty .link-u {\n        background: none; border: none; padding: 0;\n        font: inherit; cursor: pointer;\n        color: var(--ember-600);\n        border-bottom: 1px solid var(--ember-500);\n    }\n\n    \/* ---------- Responsive (existing breakpoints) ---------- *\/\n    @media (max-width: 1000px) {\n        .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }\n    }\n    @media (max-width: 640px) {\n        .shop-hero { padding: 48px 0 40px; }\n        .shop-grid-sec { padding: 48px 0 72px; }\n        .shop-grid { grid-template-columns: 1fr; gap: 56px; }\n        .shop-filters-inner { gap: 10px; }\n        .filter-group { grid-template-columns: 1fr; row-gap: 6px; }\n        .filter-count { width: 100%; margin-left: 0; }\n        .card-body h3 { font-size: 26px; }\n    }\n<\/style>\n\n<style id=\"lpr-shop-mobile-polish\">\n    \/* =========================================================\n       Mobile-friendly polish for the Coffees \/ Shop page.\n       Layered ON TOP of the rules above so behavior at desktop\n       is unchanged \u2014 only narrow viewports are affected.\n       Targets: thumb-friendly tap sizes, easier filter UI,\n       tighter typography rhythm, no overflow on any phone width.\n       ========================================================= *\/\n\n    \/* ---------- Tablet & below ---------- *\/\n    @media (max-width: 820px) {\n        .shop-grid-sec { padding: 56px 0 80px; }\n        .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }\n\n        \/* Bigger tap target for the filter summary bar *\/\n        .shop-filters-bar { padding: 14px 0; gap: 10px; }\n        .sf-chev { width: 26px; height: 26px; font-size: 11px; }\n\n        \/* Card art shouldn't dominate; cap a touch *\/\n        .card-photo { margin-bottom: 16px; }\n        .card-body h3 { font-size: 26px; }\n    }\n\n    \/* ---------- Phone (\u2264640px) ---------- *\/\n    @media (max-width: 640px) {\n        \/* Hero \u2014 reclaim vertical space, keep readable *\/\n        .shop-hero { padding: 44px 16px 36px; }\n        .shop-hero h1 { margin-bottom: 14px; }\n        .shop-lede { font-size: 16px; line-height: 1.55; }\n\n        \/* Filters \u2014 make every control thumb-friendly *\/\n        .shop-filters-bar {\n            padding: 14px 0;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n        .sf-title { font-size: 12px; }\n        .sf-chev { width: 28px; height: 28px; font-size: 12px; }\n        \/* Move count + reset onto their own row when needed *\/\n        .sf-spacer { flex-basis: 100%; height: 0; }\n        .filter-count { font-size: 12.5px; }\n\n        \/* Filter group: label sits above chips, give the row air *\/\n        .filter-group { row-gap: 10px; padding-top: 10px; padding-bottom: 4px; }\n        .filter-label { font-size: 11px; letter-spacing: 0.14em; }\n\n        \/* Chips: 38px tap height, larger text \u2014 Fitts-friendly *\/\n        .chip {\n            font-size: 13px;\n            padding: 9px 14px;\n            min-height: 38px;\n            display: inline-flex;\n            align-items: center;\n            line-height: 1;\n        }\n\n        \/* Reset button \u2014 bumped to match tap-target rhythm *\/\n        .sf-reset {\n            font-size: 12px;\n            padding: 9px 16px;\n            min-height: 36px;\n        }\n\n        \/* Decaf toggle \u2014 bigger track, easier thumb hit *\/\n        .filter-summary { padding-top: 12px; }\n        .switch { padding: 6px 0; }\n        .switch-track { width: 42px; height: 24px; }\n        .switch-dot { width: 20px; height: 20px; }\n        .switch input:checked + .switch-track .switch-dot { transform: translateX(18px); }\n        .switch-label { font-size: 14px; }\n\n        \/* Grid \u2192 single column with comfortable spacing *\/\n        .shop-grid-sec { padding: 40px 0 64px; }\n        .shop-grid { grid-template-columns: 1fr; gap: 48px; }\n\n        \/* Cap card art width so single-column cards don't feel oversized *\/\n        .coffee-card { max-width: 460px; margin-inline: auto; width: 100%; }\n        .card-photo { max-width: 380px; margin-inline: auto; width: 100%; margin-bottom: 14px; }\n\n        \/* Notes \u2014 wrap rather than clip; keep all flavors visible *\/\n        .notes { flex-wrap: wrap; overflow: visible; }\n\n        \/* Card heading & origin breathing room *\/\n        .card-body { gap: 6px; }\n        .card-body h3 { font-size: 26px; }\n        .card-role { font-size: 19px; }\n        .card-origin { font-size: 12.5px; margin-bottom: 2px; }\n\n        \/* \"View coffee\" link \u2014 bump to a real tap target *\/\n        .card-cta {\n            font-size: 15px;\n            padding-top: 14px;\n            min-height: 44px;\n            align-items: center;\n        }\n        .card-cta svg { width: 16px; height: 16px; }\n\n        \/* Card foot \u2014 tidy stack, no orphan dangling labels *\/\n        .card-foot { gap: 8px; padding-top: 12px; }\n        .roast-meter { gap: 6px; }\n        .card-price { font-size: 19px; }\n\n        \/* Card badge \u2014 pull in from edge so it never overflows the photo *\/\n        .card-badge {\n            top: 8px;\n            right: 6%;\n            font-size: 16px;\n            padding: 5px 12px;\n        }\n\n        \/* Empty state \u2014 sized for phone *\/\n        .shop-empty { padding: 56px 0 24px; }\n        .shop-empty .hand { font-size: 32px !important; }\n        .shop-empty p { font-size: 15px; }\n    }\n\n    \/* ---------- Small phones (\u2264430px) ---------- *\/\n    @media (max-width: 430px) {\n        .shop-hero { padding: 36px 14px 32px; }\n        .shop-hero h1 { font-size: clamp(28px, 9vw, 40px); margin-bottom: 12px; }\n        .shop-lede { font-size: 15.5px; }\n\n        .shop-filters-bar { padding: 12px 0; }\n        .sf-active { max-width: 100%; }\n\n        \/* Drop the \"x sizes\" suffix \u2014 keeps price line on one row *\/\n        .price-sizes { display: none; }\n\n        \/* Tighter card photo for very small viewports *\/\n        .card-photo { max-width: 320px; }\n        .card-body h3 { font-size: 24px; }\n\n        .shop-grid-sec { padding: 32px 0 56px; }\n        .shop-grid { gap: 40px; }\n    }\n\n    \/* ---------- Extra-small (\u2264360px) safety ---------- *\/\n    @media (max-width: 360px) {\n        .shop-hero h1 { font-size: 26px; }\n        .chip { padding: 8px 12px; font-size: 12.5px; }\n        .card-body h3 { font-size: 22px; }\n    }\n<\/style>\n\n<!-- ============ LISTING HERO ============ -->\n<div class=\"lpr\" data-lang=\"en\">\n    <script>\n        (function(){\n            var root = document.currentScript.parentElement;\n            if (root && root.classList.contains(\"lpr\")) root.dataset.lang = (typeof isFr !== \"undefined\" && isFr) ? \"fr\" : \"en\";\n        })();\n    <\/script>\n    <section class=\"shop-hero\">\n        <div class=\"container shop-hero-inner\">\n            <div class=\"shop-eyebrow lpr-en\">The lineup<\/div>\n            <div class=\"shop-eyebrow lpr-fr\">La s\u00e9lection<\/div>\n            <h1 class=\"lpr-en\">The coffees.<br><span class=\"hand\">I roast them all.<\/span><\/h1>\n            <h1 class=\"lpr-fr\">Les caf\u00e9s.<br><span class=\"hand\">Tous torr\u00e9fi\u00e9s par mes soins.<\/span><\/h1>\n            <p class=\"shop-lede lpr-en\">Single origins from bright to bold, plus one espresso blend. Roasted in Montreal, small by design.<\/p>\n            <p class=\"shop-lede lpr-fr\">Des simples origines, du fruit\u00e9 au fonc\u00e9, plus un assemblage espresso. Torr\u00e9fi\u00e9 \u00e0 Montr\u00e9al, petit par choix.<\/p>\n        <\/div>\n    <\/section>\n\n    <!-- ============ FILTERS ============ -->\n    <section class=\"shop-filters\">\n        <details class=\"container shop-filters-details\">\n            <summary class=\"shop-filters-bar\">\n                <span class=\"sf-chev\" aria-hidden=\"true\">><\/span>\n                <span class=\"sf-title lpr-en\">Filters<\/span>\n                <span class=\"sf-title lpr-fr\">Filtres<\/span>\n                <span class=\"sf-active\" id=\"shopActiveSummary\"><\/span>\n                <span class=\"sf-spacer\"><\/span>\n                <button type=\"button\" class=\"sf-reset\" id=\"shopReset\" hidden><span class=\"lpr-en\">Reset<\/span><span class=\"lpr-fr\">R\u00e9initialiser<\/span><\/button>\n                <span class=\"filter-count\" id=\"shopCount\">Showing all 6<\/span>\n            <\/summary>\n            <div class=\"shop-filters-inner\">\n                <div class=\"filter-group\" role=\"group\" aria-label=\"Flavor\">\n                    <span class=\"filter-label lpr-en\">Flavor<\/span>\n                    <span class=\"filter-label lpr-fr\">Saveur<\/span>\n                    <div class=\"filter-chips\">\n                        <button class=\"chip is-on\" data-filter=\"flavor\" data-value=\"all\"><span class=\"lpr-en\">All<\/span><span class=\"lpr-fr\">Tout<\/span><\/button>\n                        <button class=\"chip\" data-filter=\"flavor\" data-value=\"fruity\"><span class=\"lpr-en\">Fruity & floral<\/span><span class=\"lpr-fr\">Fruit\u00e9 et floral<\/span><\/button>\n                        <button class=\"chip\" data-filter=\"flavor\" data-value=\"chocolate\"><span class=\"lpr-en\">Chocolate<\/span><span class=\"lpr-fr\">Chocolat<\/span><\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"filter-group\" role=\"group\" aria-label=\"Roast level\">\n                    <span class=\"filter-label lpr-en\">Roast<\/span>\n                    <span class=\"filter-label lpr-fr\">Torr\u00e9faction<\/span>\n                    <div class=\"filter-chips\">\n                        <button class=\"chip is-on\" data-filter=\"roast\" data-value=\"all\"><span class=\"lpr-en\">All<\/span><span class=\"lpr-fr\">Tout<\/span><\/button>\n                        <button class=\"chip\" data-filter=\"roast\" data-value=\"light-medium\"><span class=\"lpr-en\">Light-medium<\/span><span class=\"lpr-fr\">L\u00e9ger-moyen<\/span><\/button>\n                        <button class=\"chip\" data-filter=\"roast\" data-value=\"medium\"><span class=\"lpr-en\">Medium<\/span><span class=\"lpr-fr\">Moyen<\/span><\/button>\n                        <button class=\"chip\" data-filter=\"roast\" data-value=\"medium-dark\"><span class=\"lpr-en\">Medium-dark<\/span><span class=\"lpr-fr\">Moyen-fonc\u00e9<\/span><\/button>\n                        <button class=\"chip\" data-filter=\"roast\" data-value=\"dark\"><span class=\"lpr-en\">Dark<\/span><span class=\"lpr-fr\">Fonc\u00e9<\/span><\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"filter-group\" role=\"group\" aria-label=\"Brewing method\">\n                    <span class=\"filter-label lpr-en\">Brewing<\/span>\n                    <span class=\"filter-label lpr-fr\">Pr\u00e9paration<\/span>\n                    <div class=\"filter-chips\">\n                        <button class=\"chip is-on\" data-filter=\"brew\" data-value=\"all\"><span class=\"lpr-en\">All<\/span><span class=\"lpr-fr\">Tout<\/span><\/button>\n                        <button class=\"chip\" data-filter=\"brew\" data-value=\"espresso\">Espresso<\/button>\n                        <button class=\"chip\" data-filter=\"brew\" data-value=\"moka\">Moka<\/button>\n                        <button class=\"chip\" data-filter=\"brew\" data-value=\"latte\">Latte<\/button>\n                        <button class=\"chip\" data-filter=\"brew\" data-value=\"french-press\">French press<\/button>\n                        <button class=\"chip\" data-filter=\"brew\" data-value=\"filter\"><span class=\"lpr-en\">Filter<\/span><span class=\"lpr-fr\">Filtre<\/span><\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"filter-summary\">\n                    <label class=\"switch\">\n                        <input type=\"checkbox\" id=\"decafOnly\">\n                        <span class=\"switch-track\"><span class=\"switch-dot\"><\/span><\/span>\n                        <span class=\"switch-label lpr-en\">Decaf only<\/span>\n                        <span class=\"switch-label lpr-fr\">D\u00e9caf seulement<\/span>\n                    <\/label>\n                <\/div>\n            <\/div>\n        <\/details>\n    <\/section>\n\n    <!-- ============ GRID ============ -->\n    <section class=\"shop-grid-sec\">\n        <div class=\"container\">\n            <div class=\"shop-grid\" id=\"shopGrid\">\n\n                <a class=\"coffee-card\" href=\"\/shop\/brazil-mantissa\/\" data-href-fr=\"\/fr\/shop\/bresil-mantissa\/\"\n                   data-roast=\"medium\" data-flavor=\"chocolate\" data-decaf=\"no\" data-brew=\"espresso moka latte french-press filter\">\n                    <div class=\"card-photo\">\n                        <img decoding=\"async\" src=\"https:\/\/lepetitroast.com\/wp-content\/uploads\/2026\/04\/Le-Mantissa-Le-Petit-Roast-1.webp\" alt=\"Le Mantissa \u2014 Brazilian medium-roast specialty coffee bag\" loading=\"lazy\" data-alt-fr=\"Le Mantissa \u2014 sac de caf\u00e9 de sp\u00e9cialit\u00e9 br\u00e9silien, torr\u00e9faction moyenne\">\n                        <span class=\"card-badge\"><span class=\"lpr-en\">bestseller<\/span><span class=\"lpr-fr\">meilleur vendeur<\/span><\/span>\n                    <\/div>\n                    <div class=\"card-body\">\n                        <div class=\"card-role lpr-en\">The everyday<\/div>\n                        <div class=\"card-role lpr-fr\">Le quotidien<\/div>\n                        <h3>Le Mantissa<\/h3>\n                        <div class=\"card-origin lpr-en\">Brazil - Minas Gerais<\/div>\n                        <div class=\"card-origin lpr-fr\">Br\u00e9sil \u2014 Minas Gerais<\/div>\n                        <div class=\"notes\">\n                            <span class=\"note\"><span class=\"lpr-en\">Chocolate<\/span><span class=\"lpr-fr\">Chocolat<\/span><\/span>\n                            <span class=\"note\"><span class=\"lpr-en\">Hazelnut<\/span><span class=\"lpr-fr\">Noisette<\/span><\/span>\n                            <span class=\"note\">Caramel<\/span>\n                            <span class=\"note\"><span class=\"lpr-en\">Vanilla<\/span><span class=\"lpr-fr\">Vanille<\/span><\/span>\n                        <\/div>\n                        <div class=\"card-foot\">\n                            <div class=\"roast-meter\" aria-label=\"Medium roast\">\n                                <span class=\"rm-label lpr-en\">Roast<\/span>\n                                <span class=\"rm-label lpr-fr\">Torr\u00e9faction<\/span>\n                                <span class=\"rm-value lpr-en\">Medium<\/span>\n                                <span class=\"rm-value lpr-fr\">Moyen<\/span>\n                            <\/div>\n                            <div class=\"card-price\"><span class=\"price-from\"><span class=\"lpr-en\">from<\/span><span class=\"lpr-fr\">d\u00e8s<\/span><\/span> <span class=\"lpr-en\">$20<\/span><span class=\"lpr-fr\">20\u00a0$<\/span><span class=\"price-sizes\"><span class=\"lpr-en\">300g - 900g<\/span><span class=\"lpr-fr\">300 g - 900 g<\/span><\/span><\/div>\n                        <\/div>\n                        <span class=\"card-cta\"><span class=\"lpr-en\">View coffee<\/span><span class=\"lpr-fr\">Voir le caf\u00e9<\/span>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n          <\/span>\n                    <\/div>\n                <\/a>\n\n                <a class=\"coffee-card\" href=\"\/shop\/ethiopia-racine\/\" data-href-fr=\"\/fr\/shop\/ethiopia-racine\/\"\n                   data-roast=\"medium\" data-flavor=\"fruity\" data-decaf=\"no\" data-brew=\"espresso filter french-press\">\n                    <div class=\"card-photo\">\n                        <img decoding=\"async\" src=\"https:\/\/lepetitroast.com\/wp-content\/uploads\/2026\/04\/Racine-Le-Petit-Roast-1.webp\" alt=\"Racine \u2014 Ethiopian Yirgacheffe specialty coffee bag\" loading=\"lazy\" data-alt-fr=\"Racine \u2014 sac de caf\u00e9 de sp\u00e9cialit\u00e9 \u00e9thiopien Yirgacheffe\">\n                    <\/div>\n                    <div class=\"card-body\">\n                        <div class=\"card-role lpr-en\">The bright one<\/div>\n                        <div class=\"card-role lpr-fr\">Le vif<\/div>\n                        <h3>Racine<\/h3>\n                        <div class=\"card-origin lpr-en\">Ethiopia - Yirgacheffe<\/div>\n                        <div class=\"card-origin lpr-fr\">\u00c9thiopie \u2014 Yirgacheffe<\/div>\n                        <div class=\"notes\">\n                            <span class=\"note\"><span class=\"lpr-en\">Tea<\/span><span class=\"lpr-fr\">Th\u00e9<\/span><\/span>\n                            <span class=\"note\"><span class=\"lpr-en\">Jasmine<\/span><span class=\"lpr-fr\">Jasmin<\/span><\/span>\n                            <span class=\"note\"><span class=\"lpr-en\">Bergamot<\/span><span class=\"lpr-fr\">Bergamote<\/span><\/span>\n                            <span class=\"note\"><span class=\"lpr-en\">Honey<\/span><span class=\"lpr-fr\">Miel<\/span><\/span>\n                        <\/div>\n                        <div class=\"card-foot\">\n                            <div class=\"roast-meter\" aria-label=\"Medium roast\">\n                                <span class=\"rm-label lpr-en\">Roast<\/span>\n                                <span class=\"rm-label lpr-fr\">Torr\u00e9faction<\/span>\n                                <span class=\"rm-value lpr-en\">Medium<\/span>\n                                <span class=\"rm-value lpr-fr\">Moyen<\/span>\n                            <\/div>\n                            <div class=\"card-price\"><span class=\"price-from\"><span class=\"lpr-en\">from<\/span><span class=\"lpr-fr\">d\u00e8s<\/span><\/span> <span class=\"lpr-en\">$23<\/span><span class=\"lpr-fr\">23\u00a0$<\/span><span class=\"price-sizes\"><span class=\"lpr-en\">300g - 900g<\/span><span class=\"lpr-fr\">300 g - 900 g<\/span><\/span><\/div>\n                        <\/div>\n                        <span class=\"card-cta\"><span class=\"lpr-en\">View coffee<\/span><span class=\"lpr-fr\">Voir le caf\u00e9<\/span>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n          <\/span>\n                    <\/div>\n                <\/a>\n\n                <a class=\"coffee-card\" href=\"\/shop\/decaf-red-plum-colombia\/\" data-href-fr=\"\/fr\/shop\/decaf-red-plum-colombie\/\"\n                   data-roast=\"light-medium\" data-flavor=\"fruity\" data-decaf=\"yes\" data-brew=\"filter french-press\">\n                    <div class=\"card-photo\">\n                        <img decoding=\"async\" src=\"https:\/\/lepetitroast.com\/wp-content\/uploads\/2026\/04\/Decaf-Red-Plum-Le-Petit-Roast-1.webp\" alt=\"Decaf Red Plum \u2014 Colombian decaf specialty coffee bag\" loading=\"lazy\" data-alt-fr=\"Decaf Red Plum \u2014 sac de caf\u00e9 d\u00e9caf de sp\u00e9cialit\u00e9 colombien\">\n                        <span class=\"card-badge badge-plum\"><span class=\"lpr-en\">decaf<\/span><span class=\"lpr-fr\">d\u00e9caf<\/span><\/span>\n                    <\/div>\n                    <div class=\"card-body\">\n                        <div class=\"card-role lpr-en\">The surprise<\/div>\n                        <div class=\"card-role lpr-fr\">La surprise<\/div>\n                        <h3>Decaf Red Plum<\/h3>\n                        <div class=\"card-origin lpr-en\">Colombia - Cauca<\/div>\n                        <div class=\"card-origin lpr-fr\">Colombie \u2014 Cauca<\/div>\n                        <div class=\"notes\">\n                            <span class=\"note\"><span class=\"lpr-en\">Red plum<\/span><span class=\"lpr-fr\">Prune rouge<\/span><\/span>\n                            <span class=\"note\"><span class=\"lpr-en\">Red berries<\/span><span class=\"lpr-fr\">Baies rouges<\/span><\/span>\n                            <span class=\"note\">Caramel<\/span>\n                        <\/div>\n                        <div class=\"card-foot\">\n                            <div class=\"roast-meter\" aria-label=\"Light-medium roast\">\n                                <span class=\"rm-label lpr-en\">Roast<\/span>\n                                <span class=\"rm-label lpr-fr\">Torr\u00e9faction<\/span>\n                                <span class=\"rm-value lpr-en\">Light-medium<\/span>\n                                <span class=\"rm-value lpr-fr\">L\u00e9ger-moyen<\/span>\n                            <\/div>\n                            <div class=\"card-price\"><span class=\"price-from\"><span class=\"lpr-en\">from<\/span><span class=\"lpr-fr\">d\u00e8s<\/span><\/span> <span class=\"lpr-en\">$29<\/span><span class=\"lpr-fr\">29\u00a0$<\/span><span class=\"price-sizes\"><span class=\"lpr-en\">300g<\/span><span class=\"lpr-fr\">300 g<\/span><\/span><\/div>\n                        <\/div>\n                        <span class=\"card-cta\"><span class=\"lpr-en\">View coffee<\/span><span class=\"lpr-fr\">Voir le caf\u00e9<\/span>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n          <\/span>\n                    <\/div>\n                <\/a>\n\n                <a class=\"coffee-card\" href=\"\/shop\/decaf-le-calme-mexico\/\" data-href-fr=\"\/fr\/shop\/decaf-le-calme-mexico\/\"\n                   data-roast=\"medium-dark\" data-flavor=\"chocolate\" data-decaf=\"yes\" data-brew=\"espresso moka latte french-press\">\n                    <div class=\"card-photo\">\n                        <img decoding=\"async\" src=\"https:\/\/lepetitroast.com\/wp-content\/uploads\/2026\/04\/Decaf-Le-Calme-Le-Petit-Roast-1.webp\" alt=\"Decaf Le Calme \u2014 Mexican decaf specialty coffee bag\" loading=\"lazy\" data-alt-fr=\"Decaf Le Calme \u2014 sac de caf\u00e9 d\u00e9caf de sp\u00e9cialit\u00e9 mexicain\">\n                        <span class=\"card-badge badge-plum\"><span class=\"lpr-en\">decaf<\/span><span class=\"lpr-fr\">d\u00e9caf<\/span><\/span>\n                    <\/div>\n                    <div class=\"card-body\">\n                        <div class=\"card-role lpr-en\">The easy one<\/div>\n                        <div class=\"card-role lpr-fr\">Le doux<\/div>\n                        <h3>Decaf Le Calme<\/h3>\n                        <div class=\"card-origin lpr-en\">Mexico - Chiapas<\/div>\n                        <div class=\"card-origin lpr-fr\">Mexique \u2014 Chiapas<\/div>\n                        <div class=\"notes\">\n                            <span class=\"note\"><span class=\"lpr-en\">Chocolate<\/span><span class=\"lpr-fr\">Chocolat<\/span><\/span>\n                            <span class=\"note\"><span class=\"lpr-en\">Brown sugar<\/span><span class=\"lpr-fr\">Cassonade<\/span><\/span>\n                            <span class=\"note\"><span class=\"lpr-en\">Smooth<\/span><span class=\"lpr-fr\">Rond<\/span><\/span>\n                        <\/div>\n                        <div class=\"card-foot\">\n                            <div class=\"roast-meter\" aria-label=\"Medium-dark roast\">\n                                <span class=\"rm-label lpr-en\">Roast<\/span>\n                                <span class=\"rm-label lpr-fr\">Torr\u00e9faction<\/span>\n                                <span class=\"rm-value lpr-en\">Medium-dark<\/span>\n                                <span class=\"rm-value lpr-fr\">Moyen-fonc\u00e9<\/span>\n                            <\/div>\n                            <div class=\"card-price\"><span class=\"price-from\"><span class=\"lpr-en\">from<\/span><span class=\"lpr-fr\">d\u00e8s<\/span><\/span> <span class=\"lpr-en\">$22<\/span><span class=\"lpr-fr\">22\u00a0$<\/span><span class=\"price-sizes\"><span class=\"lpr-en\">300g - 900g<\/span><span class=\"lpr-fr\">300 g - 900 g<\/span><\/span><\/div>\n                        <\/div>\n                        <span class=\"card-cta\"><span class=\"lpr-en\">View coffee<\/span><span class=\"lpr-fr\">Voir le caf\u00e9<\/span>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n          <\/span>\n                    <\/div>\n                <\/a>\n\n                <a class=\"coffee-card\" href=\"\/shop\/colombia-le-fort\/\" data-href-fr=\"\/fr\/shop\/colombie-le-fort\/\"\n                   data-roast=\"dark\" data-flavor=\"chocolate\" data-decaf=\"no\" data-brew=\"espresso moka french-press\">\n                    <div class=\"card-photo\">\n                        <img decoding=\"async\" src=\"https:\/\/lepetitroast.com\/wp-content\/uploads\/2026\/04\/Le-Fort-Le-Petit-Roast-1.webp\" alt=\"Le Fort \u2014 Colombian dark-roast specialty coffee bag\" loading=\"lazy\" data-alt-fr=\"Le Fort \u2014 sac de caf\u00e9 de sp\u00e9cialit\u00e9 colombien, torr\u00e9faction fonc\u00e9e\">\n                    <\/div>\n                    <div class=\"card-body\">\n                        <div class=\"card-role lpr-en\">The bold one<\/div>\n                        <div class=\"card-role lpr-fr\">L'intense<\/div>\n                        <h3>Le Fort<\/h3>\n                        <div class=\"card-origin lpr-en\">Colombia - Huila<\/div>\n                        <div class=\"card-origin lpr-fr\">Colombie \u2014 Huila<\/div>\n                        <div class=\"notes\">\n                            <span class=\"note\"><span class=\"lpr-en\">Cocoa<\/span><span class=\"lpr-fr\">Cacao<\/span><\/span>\n                            <span class=\"note\"><span class=\"lpr-en\">Molasses<\/span><span class=\"lpr-fr\">M\u00e9lasse<\/span><\/span>\n                            <span class=\"note\"><span class=\"lpr-en\">Bold<\/span><span class=\"lpr-fr\">Cors\u00e9<\/span><\/span>\n                        <\/div>\n                        <div class=\"card-foot\">\n                            <div class=\"roast-meter\" aria-label=\"Dark roast\">\n                                <span class=\"rm-label lpr-en\">Roast<\/span>\n                                <span class=\"rm-label lpr-fr\">Torr\u00e9faction<\/span>\n                                <span class=\"rm-value lpr-en\">Dark<\/span>\n                                <span class=\"rm-value lpr-fr\">Fonc\u00e9<\/span>\n                            <\/div>\n                            <div class=\"card-price\"><span class=\"price-from\"><span class=\"lpr-en\">from<\/span><span class=\"lpr-fr\">d\u00e8s<\/span><\/span> <span class=\"lpr-en\">$21<\/span><span class=\"lpr-fr\">21\u00a0$<\/span><span class=\"price-sizes\"><span class=\"lpr-en\">300g - 900g<\/span><span class=\"lpr-fr\">300 g - 900 g<\/span><\/span><\/div>\n                        <\/div>\n                        <span class=\"card-cta\"><span class=\"lpr-en\">View coffee<\/span><span class=\"lpr-fr\">Voir le caf\u00e9<\/span>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n          <\/span>\n                    <\/div>\n                <\/a>\n\n                <a class=\"coffee-card\" href=\"\/shop\/the-espresso-blend\/\" data-href-fr=\"\/fr\/shop\/le-melange-espresso\/\"\n                   data-roast=\"dark\" data-flavor=\"chocolate\" data-decaf=\"no\" data-brew=\"espresso moka latte\">\n                    <div class=\"card-photo\">\n                        <img decoding=\"async\" src=\"https:\/\/lepetitroast.com\/wp-content\/uploads\/2026\/04\/LEspresso-Le-Petit-Roast-1.webp\" alt=\"L'Espresso \u2014 dark-roast espresso blend coffee bag\" loading=\"lazy\" data-alt-fr=\"L'Espresso \u2014 sac de caf\u00e9 assemblage espresso, torr\u00e9faction fonc\u00e9e\">\n                        <span class=\"card-badge badge-blend\"><span class=\"lpr-en\">blend<\/span><span class=\"lpr-fr\">assemblage<\/span><\/span>\n                    <\/div>\n                    <div class=\"card-body\">\n                        <div class=\"card-role lpr-en\">The blend<\/div>\n                        <div class=\"card-role lpr-fr\">L'assemblage<\/div>\n                        <h3>L'Espresso<\/h3>\n                        <div class=\"card-origin lpr-en\">House blend - espresso<\/div>\n                        <div class=\"card-origin lpr-fr\">Assemblage maison \u2014 espresso<\/div>\n                        <div class=\"notes\">\n                            <span class=\"note\"><span class=\"lpr-en\">Dark chocolate<\/span><span class=\"lpr-fr\">Chocolat noir<\/span><\/span>\n                            <span class=\"note\">Caramel<\/span>\n                            <span class=\"note\">Crema<\/span>\n                        <\/div>\n                        <div class=\"card-foot\">\n                            <div class=\"roast-meter\" aria-label=\"Dark roast\">\n                                <span class=\"rm-label lpr-en\">Roast<\/span>\n                                <span class=\"rm-label lpr-fr\">Torr\u00e9faction<\/span>\n                                <span class=\"rm-value lpr-en\">Dark<\/span>\n                                <span class=\"rm-value lpr-fr\">Fonc\u00e9<\/span>\n                            <\/div>\n                            <div class=\"card-price\"><span class=\"price-from\"><span class=\"lpr-en\">from<\/span><span class=\"lpr-fr\">d\u00e8s<\/span><\/span> <span class=\"lpr-en\">$20<\/span><span class=\"lpr-fr\">20\u00a0$<\/span><span class=\"price-sizes\"><span class=\"lpr-en\">300g - 900g<\/span><span class=\"lpr-fr\">300 g - 900 g<\/span><\/span><\/div>\n                        <\/div>\n                        <span class=\"card-cta\"><span class=\"lpr-en\">View coffee<\/span><span class=\"lpr-fr\">Voir le caf\u00e9<\/span>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n          <\/span>\n                    <\/div>\n                <\/a>\n\n            <\/div>\n\n            <div class=\"shop-empty\" id=\"shopEmpty\" hidden>\n                <div class=\"hand lpr-en\" style=\"font-size:40px;color:var(--ember-600);transform:rotate(-3deg);display:inline-block;margin-bottom:8px;\">nothing matches.<\/div>\n                <div class=\"hand lpr-fr\" style=\"font-size:40px;color:var(--ember-600);transform:rotate(-3deg);display:inline-block;margin-bottom:8px;\">aucun r\u00e9sultat.<\/div>\n                <p class=\"lpr-en\">Try loosening a filter -- or <button type=\"button\" class=\"link-u\" onclick=\"resetFilters()\">reset all<\/button>.<\/p>\n                <p class=\"lpr-fr\">Essaie d'enlever un filtre \u2014 ou <button type=\"button\" class=\"link-u\" onclick=\"resetFilters()\">tout r\u00e9initialiser<\/button>.<\/p>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- ============ HELP ME CHOOSE ============ -->\n    <section class=\"sec quiz\" id=\"quiz\">\n        <div class=\"container\">\n            <div class=\"quiz-card\">\n                <div class=\"quiz-card-inner\">\n                    <div class=\"sec-label lpr-en\">Too many choices?<\/div>\n                    <div class=\"sec-label lpr-fr\">Trop de choix\u00a0?<\/div>\n                    <h2 class=\"lpr-en\">Let me help you <span class=\"hand\">pick.<\/span><\/h2>\n                    <h2 class=\"lpr-fr\">Je t'aide \u00e0 <span class=\"hand\">choisir.<\/span><\/h2>\n                    <p class=\"lead lpr-en\">Three quick questions -- flavors you love, how you drink it, and your caffeine mood. I'll point you at the bag I'd actually recommend.<\/p>\n                    <p class=\"lead lpr-fr\">Trois questions rapides \u2014 les saveurs que tu aimes, comment tu le bois, et ton humeur caf\u00e9ine. Je te pointe vers le sac que je te recommanderais vraiment.<\/p>\n                    <a class=\"btn btn-primary\" href=\"#help-me-choose\">\n                        <span class=\"lpr-en\">Help me choose<\/span>\n                        <span class=\"lpr-fr\">Aide-moi \u00e0 choisir<\/span>\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n                    <\/a>\n                    <div class=\"quiz-foot lpr-en\">Takes about 30 seconds<\/div>\n                    <div class=\"quiz-foot lpr-fr\">Environ 30 secondes<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <script>\n        (function(){\n            var T = isFr ? {\n                showingAll:    function(n){ return 'Afficher les ' + n; },\n                showingOf:     function(s, n){ return s + ' sur ' + n; },\n                decafOnly:     'D\u00e9caf seulement',\n                partsJoiner:   ' \u00b7 '\n            } : {\n                showingAll:    function(n){ return 'Showing all ' + n; },\n                showingOf:     function(s, n){ return 'Showing ' + s + ' of ' + n; },\n                decafOnly:     'Decaf only',\n                partsJoiner:   ' \u00b7 '\n            };\n\n            var ALL_CARDS = document.querySelectorAll('.coffee-card');\n            var TOTAL = ALL_CARDS.length;\n\n            var state = { roast: 'all', flavor: 'all', brew: 'all', decaf: false };\n\n            if (isFr) {\n                ALL_CARDS.forEach(function(a){\n                    if (a.dataset.hrefFr) a.setAttribute('href', a.dataset.hrefFr);\n                });\n                document.querySelectorAll('.lpr [data-alt-fr]').forEach(function(img){\n                    img.alt = img.dataset.altFr;\n                });\n            }\n\n            function chipLabel(chip){\n                var visibleSpan = chip.querySelector(isFr ? '.lpr-fr' : '.lpr-en');\n                return (visibleSpan ? visibleSpan.textContent : chip.textContent).trim();\n            }\n\n            function apply(){\n                var shown = 0;\n                ALL_CARDS.forEach(function(c){\n                    var r = c.dataset.roast;\n                    var f = c.dataset.flavor;\n                    var d = c.dataset.decaf === 'yes';\n                    var brews = (c.dataset.brew || '').split(' ');\n                    var ok = (state.roast === 'all' || state.roast === r)\n                        && (state.flavor === 'all' || state.flavor === f)\n                        && (state.brew === 'all' || brews.indexOf(state.brew) !== -1)\n                        && (!state.decaf || d);\n                    c.style.display = ok ? '' : 'none';\n                    if (ok) shown++;\n                });\n                var count = document.getElementById('shopCount');\n                count.textContent = shown === TOTAL ? T.showingAll(TOTAL) : T.showingOf(shown, TOTAL);\n                document.getElementById('shopEmpty').hidden = shown > 0;\n\n                var parts = [];\n                ['flavor','roast','brew'].forEach(function(dim){\n                    if (state[dim] !== 'all') {\n                        var chip = document.querySelector('.chip[data-filter=\"' + dim + '\"][data-value=\"' + state[dim] + '\"]');\n                        if (chip) parts.push(chipLabel(chip));\n                    }\n                });\n                if (state.decaf) parts.push(T.decafOnly);\n                document.getElementById('shopActiveSummary').textContent = parts.length ? parts.join(T.partsJoiner) : '';\n                document.getElementById('shopReset').hidden = parts.length === 0;\n            }\n\n            window.resetFilters = function(){\n                state.roast = 'all'; state.flavor = 'all'; state.brew = 'all'; state.decaf = false;\n                document.querySelectorAll('.chip').forEach(function(b){\n                    b.classList.toggle('is-on', b.dataset.value === 'all');\n                });\n                document.getElementById('decafOnly').checked = false;\n                apply();\n            };\n\n            document.querySelectorAll('.chip').forEach(function(btn){\n                btn.addEventListener('click', function(e){\n                    e.preventDefault();\n                    e.stopPropagation();\n                    var dim = btn.dataset.filter;\n                    var val = btn.dataset.value;\n                    state[dim] = val;\n                    document.querySelectorAll('.chip[data-filter=\"' + dim + '\"]').forEach(function(b){\n                        b.classList.toggle('is-on', b.dataset.value === val);\n                    });\n                    apply();\n                });\n            });\n            document.getElementById('decafOnly').addEventListener('change', function(e){\n                state.decaf = e.target.checked;\n                apply();\n            });\n            document.getElementById('shopReset').addEventListener('click', function(e){\n                e.preventDefault();\n                e.stopPropagation();\n                resetFilters();\n            });\n\n            apply();\n        })();\n    <\/script>\n\n\n    <style id=\"lpr-polish-patch\">\n        \/* ---- A11y: focus rings on every tappable control ---- *\/\n        .lpr a:focus-visible,\n        .lpr button:focus-visible,\n        .lpr summary:focus-visible,\n        .lpr .chip:focus-visible,\n        .lpr .switch:focus-within .switch-track,\n        .lpr input:focus-visible + .switch-track {\n            outline: 2px solid var(--ember-600);\n            outline-offset: 3px;\n            border-radius: 999px;\n        }\n        .lpr .btn:focus-visible {\n            outline: 3px solid var(--ember-700);\n            outline-offset: 2px;\n        }\n\n        \/* ---- Contrast bump: primary CTA on cream needs ember-700 for AA ---- *\/\n        .lpr .btn-primary {\n            background: var(--ember-700) !important;\n        }\n        .lpr .btn-primary:hover {\n            background: var(--roast-900) !important;\n        }\n\n        \/* ---- Reduced motion ---- *\/\n        @media (prefers-reduced-motion: reduce) {\n            .lpr *,\n            .lpr *::before,\n            .lpr *::after {\n                animation-duration: 0.001ms !important;\n                animation-iteration-count: 1 !important;\n                transition-duration: 0.001ms !important;\n            }\n            .lpr .btn:hover,\n            .lpr .pcard:hover,\n            .lpr .coffee-card:hover,\n            .lpr .pick:hover .pick-bag,\n            .lpr .about-portrait:hover,\n            .lpr .hero-bag:hover { transform: none !important; }\n            .lpr .hero-scroll svg { animation: none !important; }\n        }\n\n        \/* ---- 44px min tap target on chips & decaf switch ---- *\/\n        @media (max-width: 820px) {\n            .lpr .chip { min-height: 44px; padding: 10px 14px; }\n            .lpr .switch { min-height: 44px; }\n        }\n\n        \/* ---- Caveat readability floor: never below 16px ---- *\/\n        .lpr .hand,\n        .lpr .hand-inline,\n        .lpr .hero-signature {\n            font-size: max(1em, 16px);\n        }\n\n        \/* ---- Homepage hero: photo-first on phone (when .hero-inner exists) ---- *\/\n        @media (max-width: 700px) {\n            .lpr .hero.hero-cream .hero-inner {\n                display: flex !important;\n                flex-direction: column !important;\n            }\n            .lpr .hero.hero-cream .hero-inner > .hero-art { order: -1; margin-bottom: 16px; }\n            .lpr .hero.hero-cream .hero-inner > .hero-copy { order: 1; }\n        }\n\n        \/* ---- Hero CTAs full-width on phone for thumb reach ---- *\/\n        @media (max-width: 480px) {\n            .lpr .hero.hero-cream .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }\n            .lpr .hero.hero-cream .hero-ctas .btn {\n                display: flex;\n                justify-content: center;\n                width: 100%;\n                padding: 16px 24px;\n                min-height: 52px;\n                box-sizing: border-box;\n            }\n        }\n\n        \/* ---- About hero meta: stack on smallest phones (\u2264380px) ---- *\/\n        @media (max-width: 380px) {\n            .lpr .about-hero-meta {\n                flex-direction: column;\n                align-items: flex-start;\n                gap: 4px;\n            }\n            .lpr .about-hero-meta .sep { display: none; }\n        }\n\n        \/* ---- Coffees: bigger reset button in empty state ---- *\/\n        .lpr .shop-empty .btn-reset-big {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            margin-top: 14px;\n            padding: 12px 22px;\n            min-height: 44px;\n            background: var(--ember-700);\n            color: var(--cream-50);\n            border: none;\n            border-radius: 999px;\n            font-family: var(--font-body);\n            font-weight: 600;\n            font-size: 14px;\n            cursor: pointer;\n            transition: background 200ms;\n        }\n        .lpr .shop-empty .btn-reset-big:hover { background: var(--roast-900); }\n\n        \/* ---- Decaf switch: focus state for keyboard ---- *\/\n        .lpr .switch input:focus-visible + .switch-track {\n            box-shadow: 0 0 0 3px rgba(196, 96, 31, 0.4);\n        }\n    <\/style>\n\n    <script id=\"lpr-polish-script\">\n        (function(){\n            var lpr = document.querySelector('.lpr');\n            if (!lpr) return;\n\n            \/\/ ----- Image perf: LCP candidates eager, others async -----\n            var lcpSelectors = ['.hero-bag img', '.about-portrait img', '.shop-hero img'];\n            var lcpImg = null;\n            for (var i = 0; i < lcpSelectors.length && !lcpImg; i++) {\n                lcpImg = lpr.querySelector(lcpSelectors[i]);\n            }\n            if (lcpImg) {\n                lcpImg.setAttribute('fetchpriority', 'high');\n                lcpImg.setAttribute('loading', 'eager');\n                lcpImg.setAttribute('decoding', 'async');\n            }\n            lpr.querySelectorAll('img').forEach(function(img){\n                if (img === lcpImg) return;\n                if (!img.hasAttribute('decoding')) img.setAttribute('decoding', 'async');\n                if (!img.hasAttribute('loading')) img.setAttribute('loading', 'lazy');\n            });\n\n            \/\/ ----- Coffees: persist filter <details> open state, default open first visit -----\n            var details = lpr.querySelector('.shop-filters-details');\n            if (details) {\n                var KEY = 'lpr.shopFiltersOpen';\n                var stored = null;\n                try { stored = localStorage.getItem(KEY); } catch (e) {}\n                if (stored === null) {\n                    details.open = true;            \/\/ first visit: show filters\n                } else {\n                    details.open = stored === '1';\n                }\n                details.addEventListener('toggle', function(){\n                    try { localStorage.setItem(KEY, details.open ? '1' : '0'); } catch (e) {}\n                });\n            }\n\n            \/\/ ----- Coffees: bigger reset button in empty state -----\n            var emptyBox = lpr.querySelector('.shop-empty');\n            if (emptyBox && !emptyBox.querySelector('.btn-reset-big')) {\n                var isFrLang = lpr.dataset.lang === 'fr';\n                var btn = document.createElement('button');\n                btn.type = 'button';\n                btn.className = 'btn-reset-big';\n                btn.innerHTML = '<svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 3-6.7\"\/><path d=\"M3 4v5h5\"\/><\/svg>' +\n                    '<span>' + (isFrLang ? 'Tout r\u00e9initialiser' : 'Reset all filters') + '<\/span>';\n                btn.addEventListener('click', function(){\n                    if (typeof window.resetFilters === 'function') window.resetFilters();\n                });\n                emptyBox.appendChild(btn);\n            }\n        })();\n    <\/script>\n\n<\/div><!-- \/.lpr -->\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-111959","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Coffees | Le Petit Roast<\/title>\n<meta name=\"description\" content=\"Browse light, medium, and dark roast specialty coffees. Roasted fresh when you order. Ships across Canada and the USA.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lepetitroast.com\/fr\/cafes\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Coffees | Le Petit Roast\" \/>\n<meta property=\"og:description\" content=\"Browse light, medium, and dark roast specialty coffees. Roasted fresh when you order. Ships across Canada and the USA.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lepetitroast.com\/fr\/cafes\/\" \/>\n<meta property=\"og:site_name\" content=\"Le Petit Roast\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-15T01:20:46+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimation du temps de lecture\" \/>\n\t<meta name=\"twitter:data1\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/lepetitroast.com\\\/coffees\\\/\",\"url\":\"https:\\\/\\\/lepetitroast.com\\\/coffees\\\/\",\"name\":\"Coffees | Le Petit Roast\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/lepetitroast.com\\\/#website\"},\"datePublished\":\"2025-01-03T01:34:04+00:00\",\"dateModified\":\"2026-05-15T01:20:46+00:00\",\"description\":\"Browse light, medium, and dark roast specialty coffees. Roasted fresh when you order. Ships across Canada and the USA.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/lepetitroast.com\\\/coffees\\\/#breadcrumb\"},\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/lepetitroast.com\\\/coffees\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/lepetitroast.com\\\/coffees\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/lepetitroast.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Coffees\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/lepetitroast.com\\\/#website\",\"url\":\"https:\\\/\\\/lepetitroast.com\\\/\",\"name\":\"Le Petit Roast\",\"description\":\"Good coffee doesn\u2019t have to be complicated.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/lepetitroast.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-CA\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Caf\u00e9s | Le Petit Roast","description":"D\u00e9couvrez nos caf\u00e9s torr\u00e9fi\u00e9s l\u00e9gers, moyens et fonc\u00e9s. Torr\u00e9fi\u00e9 frais \u00e0 la commande. Livraison partout au Canada et aux \u00c9tats-Unis.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/lepetitroast.com\/fr\/cafes\/","og_locale":"fr_CA","og_type":"article","og_title":"Coffees | Le Petit Roast","og_description":"Browse light, medium, and dark roast specialty coffees. Roasted fresh when you order. Ships across Canada and the USA.","og_url":"https:\/\/lepetitroast.com\/fr\/cafes\/","og_site_name":"Le Petit Roast","article_modified_time":"2026-05-15T01:20:46+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimation du temps de lecture":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/lepetitroast.com\/coffees\/","url":"https:\/\/lepetitroast.com\/coffees\/","name":"Caf\u00e9s | Le Petit Roast","isPartOf":{"@id":"https:\/\/lepetitroast.com\/#website"},"datePublished":"2025-01-03T01:34:04+00:00","dateModified":"2026-05-15T01:20:46+00:00","description":"D\u00e9couvrez nos caf\u00e9s torr\u00e9fi\u00e9s l\u00e9gers, moyens et fonc\u00e9s. Torr\u00e9fi\u00e9 frais \u00e0 la commande. Livraison partout au Canada et aux \u00c9tats-Unis.","breadcrumb":{"@id":"https:\/\/lepetitroast.com\/coffees\/#breadcrumb"},"inLanguage":"fr-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lepetitroast.com\/coffees\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/lepetitroast.com\/coffees\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lepetitroast.com\/"},{"@type":"ListItem","position":2,"name":"Coffees"}]},{"@type":"WebSite","@id":"https:\/\/lepetitroast.com\/#website","url":"https:\/\/lepetitroast.com\/","name":"Le Petit Roast","description":"Good coffee doesn\u2019t have to be complicated.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lepetitroast.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-CA"}]}},"_links":{"self":[{"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/pages\/111959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/comments?post=111959"}],"version-history":[{"count":20,"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/pages\/111959\/revisions"}],"predecessor-version":[{"id":113442,"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/pages\/111959\/revisions\/113442"}],"wp:attachment":[{"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/media?parent=111959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}