{"id":2,"date":"2020-01-06T14:15:05","date_gmt":"2020-01-06T14:15:05","guid":{"rendered":"https:\/\/avadawebsites.wpengine.com\/interior-design\/?page_id=2"},"modified":"2026-05-18T20:46:36","modified_gmt":"2026-05-19T00:46:36","slug":"home","status":"publish","type":"page","link":"https:\/\/lepetitroast.com\/fr\/","title":{"rendered":"Accueil"},"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\"><script>\n    \/\/ =====================================================\n    \/\/ Language detection \u2014 reads <html lang=\"...\"> which WP\n    \/\/ (and multilingual plugins like Polylang \/ WPML) set per\n    \/\/ page. Any lang starting with \"fr\" (fr, fr-CA, fr-FR) \u2192 FR.\n    \/\/ Everything else falls back to English.\n    \/\/ =====================================================\n    var isFr = (document.documentElement.lang || '').toLowerCase().indexOf('fr') === 0;\n<\/script>\n\n<!-- Avada code block: homepage\/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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&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    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    .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    .lpr .container {\n        width: 100% !important;\n        box-sizing: border-box !important;\n    }\n    @media (max-width: 1240px) {\n        .lpr .principle-grid {\n            max-width: 100% !important;\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    .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    .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    html, body {\n        max-width: 100vw;\n        overflow-x: hidden;\n    }\n    .lpr {\n        max-width: 100% !important;\n        overflow-x: hidden !important;\n        box-sizing: border-box !important;\n    }\n    .lpr * { box-sizing: border-box; }\n    .lpr section,\n    .lpr img,\n    .lpr svg {\n        max-width: 100% !important;\n    }\n    .lpr h1, .lpr h2, .lpr h3, .lpr p {\n        overflow-wrap: break-word;\n        word-break: normal;\n    }\n    @media (max-width: 500px) {\n        .lpr h1 { font-size: clamp(36px, 10vw, 56px) !important; line-height: 1.05 !important; }\n        .lpr h2 { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.05 !important; }\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[data-lang=\"en\"] .lpr-fr,\n    .lpr[data-lang=\"fr\"] .lpr-en {\n        display: none !important;\n    }\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 .hero-inner {\n        display: grid !important;\n        grid-template-columns: 1.1fr 1fr !important;\n        gap: 72px !important;\n        direction: ltr !important;\n        align-items: center !important;\n        text-align: left !important;\n    }\n    .lpr .hero-copy { text-align: left; max-width: 560px; }\n    .lpr .hero-art { position: relative; justify-self: center; width: 100%; max-width: 520px; }\n\n    .lpr .hero-inner > .hero-copy {\n        grid-column: 1 \/ 2 !important;\n        grid-row: 1 !important;\n        order: 0 !important;\n        justify-self: start !important;\n        margin-right: auto !important;\n    }\n    .lpr .hero-inner > .hero-art {\n        grid-column: 2 \/ 3 !important;\n        grid-row: 1 !important;\n        order: 1 !important;\n        justify-self: center !important;\n    }\n\n    .lpr .hero-art, .lpr .featured-bag, .lpr .pcard-bag, .lpr .pick-bag {\n        position: relative;\n        aspect-ratio: 4 \/ 5;\n    }\n    .lpr .hero-bag, .lpr .hero-bag img,\n    .lpr .pick-bag img {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n    }\n    .lpr .hero-bag {\n        overflow: hidden;\n        border-radius: 20px;\n        background: linear-gradient(165deg, rgba(139,90,43,0.35), rgba(61,42,29,0.5));\n    }\n\n    .lpr .hero-bag.hero-bag--photo {\n        overflow: hidden;\n        border-radius: 20px;\n        transform: rotate(-2deg);\n        animation: lpr-hero-photo-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;\n        will-change: transform;\n    }\n    .lpr .hero-bag.hero-bag--photo img {\n        width: 100% !important;\n        height: 100% !important;\n        object-fit: cover !important;\n        object-position: 42% 55%;\n        display: block;\n        animation: lpr-hero-photo-drift 14s ease-in-out 900ms infinite alternate;\n    }\n    .lpr .hero-bag.hero-bag--photo:hover {\n        transform: rotate(-2deg) translateY(-4px);\n    }\n    @keyframes lpr-hero-photo-in {\n        0%   { opacity: 0; transform: rotate(-2deg) translateY(18px) scale(0.98); }\n        100% { opacity: 1; transform: rotate(-2deg) translateY(0)    scale(1);    }\n    }\n    @keyframes lpr-hero-photo-drift {\n        0%   { transform: scale(1.04) translate(0, 0); }\n        100% { transform: scale(1.08) translate(-1.5%, -1.2%); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n        .lpr .hero-bag.hero-bag--photo,\n        .lpr .hero-bag.hero-bag--photo img {\n            animation: none !important;\n        }\n    }\n    @media (max-width: 640px) {\n        .lpr .hero-bag.hero-bag--photo { transform: rotate(-1deg); border-radius: 16px; }\n        .lpr .hero-bag.hero-bag--photo:hover { transform: rotate(-1deg) translateY(-3px); }\n    }\n\n    @media (max-width: 960px) {\n        .lpr .hero-inner {\n            grid-template-columns: 1fr !important;\n            gap: 56px !important;\n            padding: 64px 24px 96px !important;\n        }\n        .lpr .hero-inner > .hero-copy { grid-column: 1 \/ 2 !important; grid-row: 1 !important; }\n        .lpr .hero-inner > .hero-art  { grid-column: 1 \/ 2 !important; grid-row: 2 !important; max-width: 300px; margin: 0 auto; }\n    }\n\n    .lpr .featured-grid { display: grid !important; grid-template-columns: 1.1fr 1fr !important; gap: 80px !important; align-items: center !important; }\n    @media (max-width: 960px) { .lpr .featured-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }\n\n    .lpr .cards-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }\n    @media (max-width: 900px) { .lpr .cards-grid { grid-template-columns: repeat(2, 1fr) !important; } }\n    @media (max-width: 600px) { .lpr .cards-grid { grid-template-columns: 1fr !important; } }\n\n    .lpr .picks-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 64px 48px !important; }\n    @media (max-width: 820px) { .lpr .picks-grid { grid-template-columns: 1fr !important; } }\n\n    .lpr .how-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 48px !important; }\n    @media (max-width: 820px) { .lpr .how-grid { grid-template-columns: 1fr !important; gap: 36px !important; } }\n\n    .lpr .why-grid { display: grid !important; grid-template-columns: 1fr 1.2fr !important; gap: 80px !important; align-items: start !important; }\n    .lpr .why-grid > .why-head { grid-column: 1 \/ 2 !important; grid-row: 1 !important; order: 0 !important; }\n    .lpr .why-grid > .why-body { grid-column: 2 \/ 3 !important; grid-row: 1 !important; order: 1 !important; }\n    @media (max-width: 960px) {\n        .lpr .why-grid { grid-template-columns: 1fr !important; gap: 32px !important; }\n        .lpr .why-grid > .why-head, .lpr .why-grid > .why-body { grid-column: 1 \/ 2 !important; grid-row: auto !important; }\n    }\n\n    .lpr .story-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 72px !important; align-items: center !important; }\n    .lpr .story-grid > .story-photo { grid-column: 1 \/ 2 !important; grid-row: 1 !important; order: 0 !important; }\n    .lpr .story-grid > :nth-child(2) { grid-column: 2 \/ 3 !important; grid-row: 1 !important; order: 1 !important; }\n    @media (max-width: 1000px) {\n        .lpr .story-grid { grid-template-columns: 1fr !important; gap: 40px !important; }\n        .lpr .story-grid > .story-photo, .lpr .story-grid > :nth-child(2) { grid-column: 1 \/ 2 !important; grid-row: auto !important; }\n    }\n\n    .lpr .shop-grid { display: grid !important; }\n\n    .lpr .hero-eyebrow + h1 { margin-top: 16px; }\n    .lpr h1 + .hero-sub { margin-top: 20px; }\n    .lpr .hero-sub + .hero-ctas { margin-top: 28px; }\n    .lpr .sec h2 + .lead { margin-top: 12px; }\n\n    .lpr .hero-ctas { display: flex !important; flex-wrap: wrap; gap: 14px; }\n<\/style>\n<style>\n    \/* inlined from homepage\/styles.css *\/\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        --f-bright: #7A9A55;\n        --f-sweet:  #D1923A;\n        --f-dark:   #5C2E24;\n        --f-decaf:  #9E4355;\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-xl: 32px;\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\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    .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-dark { background: var(--roast-900); color: var(--cream-50); }\n    .btn-dark:hover { background: var(--roast-800); }\n    .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }\n    .btn-ghost:hover { background: var(--ink); color: var(--cream-50); }\n    .btn-on-photo { background: var(--cream-50); color: var(--roast-900); }\n    .btn-on-photo:hover { background: var(--honey-300); }\n    .btn-ghost-on-photo { background: transparent; color: var(--cream-50); border-color: var(--cream-50); }\n    .btn-ghost-on-photo:hover { background: var(--cream-50); color: var(--roast-900); }\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    .link-u:hover::after { transform: scaleY(1.5); }\n\n    .promo {\n        background: var(--roast-900);\n        color: var(--cream-100);\n        text-align: center;\n        font-size: 14px;\n        font-weight: 500;\n        padding: 10px 24px;\n        letter-spacing: 0.005em;\n    }\n    .promo .hand { color: var(--honey-500); font-size: 16px; margin: 0 2px; line-height: 1; vertical-align: baseline; transform: none; display: inline; }\n    .promo .sep { color: var(--roast-600); margin: 0 10px; }\n\n    .hdr {\n        position: sticky; top: 0;\n        z-index: 50;\n        background: var(--cream-50);\n        border-bottom: 1px solid var(--line);\n    }\n    .hdr-inner {\n        display: grid;\n        grid-template-columns: 1fr auto 1fr;\n        align-items: center;\n        padding: 14px 32px;\n        gap: 24px;\n    }\n    .hdr nav { display: flex; gap: 32px; font-size: 15px; font-weight: 500; }\n    .hdr nav a { color: var(--ink); }\n    .hdr nav a:hover { color: var(--ember-600); }\n    .hdr .brand { display: flex; align-items: center; gap: 10px; justify-self: center; }\n    .hdr .brand img { width: 44px; height: auto; }\n    .hdr .brand .wm { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; line-height: 1; }\n    .hdr-right { display: flex; justify-content: flex-end; align-items: center; gap: 22px; font-size: 14px; }\n    .hdr-right a { color: var(--ink-2); font-weight: 500; }\n\n    .hdr-burger {\n        display: none;\n        align-items: center; justify-content: center;\n        width: 40px; height: 40px;\n        background: transparent; border: 0;\n        cursor: pointer; padding: 0;\n        flex-direction: column; gap: 5px;\n        justify-self: start;\n    }\n    .hdr-burger span {\n        display: block; width: 22px; height: 2px;\n        background: var(--ink); border-radius: 1px;\n        transition: transform 220ms ease, opacity 180ms ease;\n    }\n    .hdr-burger[aria-expanded=\"true\"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\n    .hdr-burger[aria-expanded=\"true\"] span:nth-child(2) { opacity: 0; }\n    .hdr-burger[aria-expanded=\"true\"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\n    .hdr-drawer {\n        position: fixed; inset: 68px 0 0 0;\n        background: var(--cream-50);\n        z-index: 49;\n        padding: 32px 28px;\n        display: none;\n        flex-direction: column;\n        gap: 4px;\n    }\n    .hdr-drawer.open { display: flex; }\n    .hdr-drawer a {\n        display: block;\n        padding: 16px 4px;\n        font-family: var(--font-display);\n        font-size: 28px;\n        font-weight: 500;\n        color: var(--ink);\n        letter-spacing: -0.015em;\n        border-bottom: 1px solid var(--line);\n    }\n    .hdr-drawer a:active { color: var(--ember-600); }\n    .hdr-drawer-sep { height: 20px; }\n    .hdr-right a:hover { color: var(--ink); }\n    .hdr-cart {\n        background: var(--roast-900);\n        color: var(--cream-50) !important;\n        padding: 9px 16px;\n        border-radius: var(--r-pill);\n        font-weight: 600 !important;\n        display: inline-flex; align-items: center; gap: 6px;\n    }\n\n    .hero.hero-cream {\n        position: relative;\n        background: var(--cream-50);\n        color: var(--ink);\n        min-height: 720px;\n        overflow: hidden;\n        display: block;\n    }\n    .hero.hero-cream::before {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        background:\n                radial-gradient(60% 50% at 85% 70%, rgba(232, 197, 118, 0.28), transparent 70%),\n                radial-gradient(50% 40% at 10% 10%, rgba(222, 129, 62, 0.10), transparent 70%);\n        pointer-events: none;\n    }\n    .hero.hero-cream .hero-inner {\n        position: relative;\n        z-index: 1;\n        padding: 96px 32px 120px;\n        display: grid;\n        grid-template-columns: 1.1fr 1fr;\n        gap: 72px;\n        align-items: center;\n        max-width: var(--container);\n        margin: 0 auto;\n    }\n    .hero-copy { max-width: 560px; }\n    .hero-eyebrow {\n        font-size: 12px;\n        font-weight: 600;\n        letter-spacing: 0.16em;\n        text-transform: uppercase;\n        color: var(--ember-600);\n        margin-bottom: 24px;\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n    }\n    .hero-eyebrow::before {\n        content: \"\";\n        width: 24px; height: 1px;\n        background: var(--ember-600);\n        display: inline-block;\n    }\n    .hero.hero-cream h1 {\n        font-family: var(--font-display);\n        font-weight: 400;\n        font-size: clamp(48px, 7vw, 96px);\n        line-height: 0.98;\n        letter-spacing: -0.035em;\n        color: var(--ink);\n        margin: 0 0 28px;\n        text-wrap: pretty;\n    }\n    .hero.hero-cream h1 .hand {\n        font-family: var(--font-hand);\n        color: var(--ember-600);\n        font-weight: 600;\n        font-size: 0.88em;\n        display: inline-block;\n        transform: rotate(-2deg);\n        line-height: 1;\n    }\n    .hero.hero-cream .hero-sub {\n        font-size: 19px;\n        line-height: 1.6;\n        max-width: 52ch;\n        color: var(--ink-2);\n        margin: 0 0 36px;\n    }\n    .hero.hero-cream .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }\n    .hero-signature {\n        font-family: var(--font-hand);\n        font-size: 22px;\n        color: var(--ink-muted);\n        line-height: 1;\n        transform: rotate(-1.5deg);\n        display: inline-block;\n    }\n\n    .hero-art {\n        position: relative;\n        justify-self: center;\n        width: 100%;\n        max-width: 520px;\n        aspect-ratio: 4 \/ 5;\n    }\n    .hero-bag {\n        position: absolute;\n        inset: 0;\n        transform: rotate(-3deg);\n        transition: transform 400ms ease;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        filter: drop-shadow(0 40px 48px rgba(61, 42, 29, 0.22)) drop-shadow(0 8px 16px rgba(61, 42, 29, 0.12));\n    }\n    .hero-bag img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n    }\n    .hero-bag:hover { transform: rotate(-3deg) translateY(-4px); }\n    .hero-sticker {\n        position: absolute;\n        top: 20px; right: 8px;\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: 22px;\n        padding: 10px 18px;\n        border-radius: 999px;\n        transform: rotate(6deg);\n        box-shadow: 0 8px 20px -6px rgba(222, 129, 62, 0.5);\n    }\n    .hero-caption {\n        position: absolute;\n        bottom: -54px; left: 50%;\n        transform: translateX(-50%) rotate(-2deg);\n        font-family: var(--font-hand);\n        font-size: 22px;\n        color: var(--ink-muted);\n        white-space: nowrap;\n    }\n    .hero.hero-cream .hero-scroll { color: var(--ink-muted); opacity: 0.6; }\n    @media (max-width: 900px) {\n        .hero.hero-cream .hero-inner { grid-template-columns: 1fr; gap: 80px; padding: 64px 24px 96px; text-align: left; }\n        .hero-art { max-width: 300px; }\n        .hero-caption { bottom: -44px; }\n    }\n    .hero-scroll {\n        position: absolute;\n        bottom: 28px; right: 32px;\n        display: flex; align-items: center; gap: 10px;\n        font-size: 13px;\n        color: var(--cream-100);\n        opacity: 0.7;\n        font-weight: 500;\n        letter-spacing: 0.06em;\n        text-transform: uppercase;\n        z-index: 1;\n    }\n    .hero-scroll svg { width: 16px; height: 24px; animation: nudge 2s ease-in-out infinite; }\n    @keyframes nudge {\n        0%, 100% { transform: translateY(0); opacity: 0.7; }\n        50% { transform: translateY(4px); opacity: 1; }\n    }\n\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    .featured { background: var(--cream-100); }\n    .featured-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }\n    .featured-bag {\n        aspect-ratio: 4 \/ 5;\n        border-radius: var(--r-lg);\n        background: linear-gradient(175deg, #C88142, #7A3E1C);\n        color: var(--cream-50);\n        position: relative;\n        overflow: hidden;\n        display: grid;\n        place-items: center;\n        box-shadow: var(--shadow-lg);\n        transform: rotate(-2deg);\n        max-width: 440px;\n        justify-self: center;\n    }\n    .featured-bag::before {\n        content: \"\";\n        position: absolute; inset: 0;\n        background:\n                radial-gradient(130% 70% at 50% -10%, rgba(255,255,255,0.28), transparent 60%),\n                radial-gradient(80% 60% at 80% 100%, rgba(0,0,0,0.3), transparent 60%);\n        pointer-events: none;\n    }\n    .featured-bag .num { position: absolute; top: 24px; left: 26px; font-family: var(--font-display); font-style: italic; font-size: 28px; font-weight: 400; opacity: 0.85; }\n    .featured-bag .mark { position: absolute; top: 24px; right: 26px; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(251, 244, 227, 0.7); display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-size: 18px; font-weight: 500; letter-spacing: -1px; }\n    .featured-bag .bag-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(52px, 7vw, 88px); line-height: 0.9; letter-spacing: -0.03em; text-align: center; padding: 0 20px; }\n    .featured-bag .bag-sub { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 16px; opacity: 0.85; letter-spacing: 0.02em; }\n    .featured-sticker { position: absolute; top: -14px; right: -14px; background: var(--cream-50); color: var(--ink); font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: var(--r-pill); transform: rotate(6deg); box-shadow: var(--shadow-md); border: 1.5px solid var(--ink); z-index: 2; }\n\n    .featured-content .eyebrow { font-size: 13px; font-weight: 600; color: var(--ember-600); margin-bottom: 12px; }\n    .featured-content h2 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 400; line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 20px; }\n    .featured-content .tasting { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ember-700); line-height: 1.3; margin: 0 0 24px; font-weight: 400; }\n    .featured-content p { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; max-width: 46ch; }\n    .featured-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 32px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 460px; }\n    .featured-meta .m { display: flex; flex-direction: column; gap: 4px; }\n    .featured-meta .m .k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }\n    .featured-meta .m .v { font-size: 15px; font-weight: 600; color: var(--ink); }\n    .featured-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }\n    .featured-price .big { font-family: var(--font-display); font-size: 42px; font-weight: 500; color: var(--ink); line-height: 1; }\n    .featured-price .by { font-family: var(--font-hand); font-size: 22px; color: var(--ink-muted); transform: rotate(-2deg); }\n\n    .lineup-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; }\n    .lineup-head .sec-head { margin-bottom: 0; }\n    .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\n    .pcard { background: var(--cream-100); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 16px; transition: transform 260ms cubic-bezier(0.2,0.7,0.2,1), background 260ms; position: relative; cursor: pointer; }\n    .pcard:hover { transform: translateY(-4px); background: var(--honey-300); }\n    .pcard-bag { aspect-ratio: 4 \/ 5; border-radius: var(--r-md); position: relative; overflow: hidden; display: grid; place-items: center; color: var(--cream-50); padding: 16px; }\n    .pcard-bag::after { content: \"\"; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,0.22), transparent 60%); pointer-events: none; }\n    .pcard-bag .num { font-family: var(--font-display); font-style: italic; font-size: 18px; position: absolute; top: 12px; left: 14px; opacity: 0.8; }\n    .pcard-bag .name { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; text-align: center; position: relative; z-index: 1; }\n    .pcard-sticker { position: absolute; top: -10px; right: 14px; background: var(--cream-50); border: 1.5px solid var(--ink); padding: 5px 12px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; color: var(--ink); transform: rotate(2deg); z-index: 2; }\n    .pcard-body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }\n    .pcard h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--ink); }\n    .pcard .origin { font-size: 13px; color: var(--ink-muted); font-weight: 500; }\n    .pcard .notes { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 6px 0 0; }\n    .pcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); }\n    .pcard-price { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink); }\n    .pcard-add { padding: 9px 16px; font-size: 13px; border-radius: var(--r-pill); background: var(--roast-900); color: var(--cream-50); font-weight: 600; transition: background 200ms; }\n    .pcard-add:hover { background: var(--ember-600); }\n\n    .picks { background: var(--cream-200); }\n    .picks .sec-head { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }\n    .picks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 48px; align-items: start; max-width: 1080px; margin-inline: auto; }\n    .pick { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; height: 100%; }\n    .pick-bag { width: 100%; max-width: 300px; aspect-ratio: 4 \/ 5; position: relative; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 24px 36px rgba(61, 42, 29, 0.18)) drop-shadow(0 6px 12px rgba(61, 42, 29, 0.1)); transition: transform 400ms ease; }\n    .pick-bag img { width: 100%; height: 100%; object-fit: contain; display: block; }\n    .pick:hover .pick-bag { transform: translateY(-6px); }\n    .pick-body { padding-top: 0; max-width: 420px; display: flex; flex-direction: column; align-items: center; flex: 1; width: 100%; }\n    .pick-eyebrow { font-family: var(--font-hand); font-size: 22px; color: var(--ember-600); line-height: 1; margin-bottom: 4px; }\n    .pick-body h3 { font-family: var(--font-display); font-size: clamp(28px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--ink); line-height: 1.05; }\n    .pick-origin { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; }\n    .pick-body p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 24px; }\n    .pick-price { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--ink); line-height: 1; margin: 0 0 20px; letter-spacing: -0.01em; margin-top: auto; }\n    .pick-price .per { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--ink-muted); letter-spacing: 0.02em; margin-left: 2px; }\n    .pick-cta { padding: 11px 20px; font-size: 14px; }\n    .picks-foot { margin-top: 56px; text-align: center; }\n    @media (max-width: 820px) { .picks-grid { grid-template-columns: 1fr; gap: 64px; max-width: 520px; } }\n\n    .how { background: var(--cream-50); }\n    .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; position: relative; }\n    .how-grid::before { content: \"\"; position: absolute; top: 32px; left: 10%; right: 10%; height: 1px; background: repeating-linear-gradient(90deg, var(--cream-300) 0 8px, transparent 8px 16px); z-index: 0; }\n    .how-step { position: relative; z-index: 1; text-align: center; padding: 0 12px; }\n    .how-n { width: 64px; height: 64px; border-radius: 999px; background: var(--cream-50); border: 1.5px solid var(--roast-900); color: var(--roast-900); font-family: var(--font-display); font-size: 22px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-feature-settings: \"ss01\" on; }\n    .how-step h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--ink); }\n    .how-step p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 280px; margin-inline: auto; }\n    .how-step p a { color: var(--ember-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }\n    .how-foot { margin-top: 72px; text-align: center; font-size: 14px; color: var(--ink-2); letter-spacing: 0.01em; padding: 18px 24px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); max-width: 780px; margin-inline: auto; }\n    .how-foot strong { color: var(--ink); font-weight: 600; }\n    @media (max-width: 820px) { .how-grid { grid-template-columns: 1fr; gap: 36px; } .how-grid::before { display: none; } }\n\n    .why { background: var(--roast-900); color: var(--cream-100); }\n    .why-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; max-width: 1080px; margin-inline: auto; }\n    .why .sec-label { color: var(--honey-500); }\n    .why h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.025em; color: var(--cream-50); margin: 0; }\n    .why h2 .hand { color: var(--ember-500); }\n    .why-body p { font-size: 18px; line-height: 1.65; color: var(--cream-100); margin: 0 0 20px; max-width: 56ch; }\n    .why-kicker { font-family: var(--font-display); font-style: italic; font-size: 22px !important; color: var(--honey-500) !important; margin-top: 32px !important; }\n    @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 32px; } }\n\n    .quiz { background: var(--cream-100); color: var(--ink); }\n    .quiz-card { max-width: 760px; margin: 0 auto; text-align: center; background: var(--cream-50); border: 1px solid rgba(61, 42, 29, 0.08); border-radius: var(--r-lg); padding: 72px 56px; box-shadow: 0 30px 60px -40px rgba(61, 42, 29, 0.25); }\n    .quiz-card .sec-label { justify-content: center; display: inline-flex; margin-bottom: 14px; }\n    .quiz-card h2 { color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5vw, 56px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 20px; }\n    .quiz-card h2 .hand { color: var(--ember-600); }\n    .quiz-card .lead { font-size: 18px; color: var(--ink-2); margin: 0 auto 32px; max-width: 48ch; }\n    .quiz-foot { margin-top: 18px; font-size: 14px; color: var(--ink-muted); }\n\n    .story { background: var(--roast-900); color: var(--cream-100); }\n    .story h2 { color: var(--cream-50); }\n    .story h2 .hand { color: var(--honey-500); }\n    .story p { color: var(--cream-100); opacity: 0.88; }\n    .story .sec-label { color: var(--honey-500); }\n    .story .link-u { color: var(--cream-50); border-bottom-color: var(--ember-500); }\n    .story .link-u:hover { color: var(--ember-500); }\n    .story .signature { color: var(--honey-500); }\n    .story-ctas { margin-top: 12px; }\n    .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }\n    .story-photo { aspect-ratio: 4 \/ 5; border-radius: var(--r-lg); background: radial-gradient(120% 80% at 30% 20%, rgba(232, 197, 118, 0.5), transparent 55%), linear-gradient(180deg, #8B5A2B, #3D2A1D); position: relative; overflow: hidden; }\n    .story-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n    .story-photo .tag { position: absolute; top: 16px; left: 16px; font-size: 11px; color: var(--cream-100); opacity: 0.6; letter-spacing: 0.1em; text-transform: uppercase; border: 1px dashed var(--cream-100); padding: 6px 10px; border-radius: 4px; background: rgba(0,0,0,0.2); }\n    .story-badge { position: absolute; bottom: 24px; right: 24px; background: var(--cream-50); padding: 12px 18px; border-radius: var(--r-md); box-shadow: var(--shadow-md); font-family: var(--font-hand); font-size: 22px; color: var(--ember-600); font-weight: 600; transform: rotate(-3deg); max-width: 180px; line-height: 1.2; }\n    .story h2 .hand { font-size: 0.9em; }\n    .story p { font-size: 18px; line-height: 1.6; color: var(--cream-100); opacity: 0.9; margin: 0 0 20px; max-width: 48ch; }\n    .story .signature { font-family: var(--font-hand); font-size: 32px; color: var(--honey-500); margin: 24px 0 0; transform: rotate(-2deg); display: inline-block; }\n\n    .reviews { background: var(--cream-50); }\n    .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }\n    .review { background: var(--cream-50); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; position: relative; }\n    .review .stars { display: flex; gap: 2px; color: var(--ember-500); font-size: 16px; }\n    .review blockquote { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }\n    .review blockquote::before { content: \"\\201C\"; color: var(--ember-500); font-size: 1.2em; margin-right: 2px; line-height: 0; vertical-align: -0.05em; }\n    .review blockquote::after { content: \"\\201D\"; color: var(--ember-500); font-size: 1.2em; line-height: 0; vertical-align: -0.05em; }\n    .review footer { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); }\n    .review .av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--honey-500), var(--ember-500)); display: grid; place-items: center; color: var(--cream-50); font-family: var(--font-display); font-weight: 500; font-size: 14px; }\n    .review .who { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }\n    .review .who .w2 { display: block; font-weight: 400; color: var(--ink-muted); font-size: 13px; margin-top: 2px; }\n\n    @media (max-width: 1000px) {\n        .hero { min-height: 560px; }\n        .hero h1 { font-size: clamp(40px, 10vw, 72px); }\n        .featured-grid, .story-grid { grid-template-columns: 1fr; gap: 40px; }\n        .quiz-card { padding: 56px 32px; }\n        .cards-grid { grid-template-columns: repeat(2, 1fr); }\n        .reviews-grid { grid-template-columns: 1fr; }\n    }\n    @media (max-width: 640px) {\n        .sec { padding: 56px 0; }\n        .cards-grid { grid-template-columns: 1fr; }\n        .featured-bag { transform: rotate(0); max-width: 340px; }\n        .featured-sticker { top: -10px; right: 10px; }\n        .featured-meta { grid-template-columns: 1fr 1fr; }\n        .hero.hero-cream .hero-inner { padding: 56px 20px 80px; gap: 56px; }\n        .hero-art { max-width: 260px; }\n        .hero-sticker { font-size: 18px; padding: 8px 14px; top: 12px; right: 4px; }\n        .hero-caption { font-size: 18px; bottom: -36px; }\n        .hero-scroll { display: none; }\n        .picks-grid { gap: 56px; }\n        .pick-bag { max-width: 260px; }\n        .pick-body h3 { font-size: 28px; }\n    }\n<\/style>\n\n<style>\n    \/* Hero background tweaks -- coffee-dark palette. *\/\n    .hero.hero-cream[data-hero-tone=\"dark\"] { color: var(--cream-50); }\n    .hero.hero-cream[data-hero-tone=\"dark\"]::before {\n        background:\n                radial-gradient(60% 50% at 85% 70%, rgba(240, 179, 127, 0.18), transparent 70%),\n                radial-gradient(50% 40% at 10% 10%, rgba(232, 197, 118, 0.10), transparent 70%);\n    }\n    .hero.hero-cream[data-hero-tone=\"dark\"] h1 { color: var(--cream-50); }\n    .hero.hero-cream[data-hero-tone=\"dark\"] .hero-sub { color: rgba(251, 244, 227, 0.82); }\n    .hero.hero-cream[data-hero-tone=\"dark\"] .hero-eyebrow { color: var(--ember-300); }\n    .hero.hero-cream[data-hero-tone=\"dark\"] .hero-eyebrow::before { background: var(--ember-300); }\n    .hero.hero-cream[data-hero-tone=\"dark\"] h1 .hand { color: var(--ember-300); }\n    .hero.hero-cream[data-hero-tone=\"dark\"] .hero-signature { color: rgba(251, 244, 227, 0.6); }\n    .hero.hero-cream[data-hero-tone=\"dark\"] .btn-ghost { color: var(--cream-50); border-color: var(--cream-50); }\n    .hero.hero-cream[data-hero-tone=\"dark\"] .btn-ghost:hover { background: var(--cream-50); color: var(--roast-900); }\n\n    \/* Tweaks panel *\/\n    .tweaks-panel {\n        position: fixed; right: 20px; bottom: 20px; z-index: 9999;\n        width: 272px; padding: 16px 16px 14px;\n        background: #fff;\n        border: 1px solid rgba(61, 42, 29, 0.12);\n        border-radius: 14px;\n        box-shadow: 0 12px 32px rgba(61, 42, 29, 0.18), 0 2px 6px rgba(61, 42, 29, 0.08);\n        font-family: var(--font-body);\n        display: none;\n    }\n    .tweaks-panel.open { display: block; }\n    .tweaks-panel h3 { font-family: var(--font-display); font-weight: 500; font-size: 18px; margin: 0 0 2px; color: var(--ink); letter-spacing: -0.01em; }\n    .tweaks-panel .tweaks-sub { font-size: 12px; color: var(--ink-muted); margin: 0 0 14px; }\n    .tweaks-panel label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 8px; }\n    .tweaks-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }\n    .tweaks-swatch { position: relative; aspect-ratio: 1 \/ 1; border-radius: 8px; cursor: pointer; border: 1.5px solid rgba(61, 42, 29, 0.1); transition: transform 140ms ease, border-color 140ms ease; padding: 0; overflow: hidden; }\n    .tweaks-swatch:hover { transform: translateY(-1px); }\n    .tweaks-swatch[aria-pressed=\"true\"] { border-color: var(--ember-600); box-shadow: 0 0 0 2px rgba(196, 96, 31, 0.2); }\n    .tweaks-swatch[aria-pressed=\"true\"]::after { content: \"\"; position: absolute; inset: 0; background: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l5 5L20 6'\/><\/svg>\") center\/16px no-repeat; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }\n    .tweaks-swatch-name { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; color: #fff; padding: 3px 4px 4px; background: linear-gradient(transparent, rgba(0,0,0,0.55)); text-align: center; pointer-events: none; }\n    .tweaks-swatch-name.dark { color: var(--ink); background: linear-gradient(transparent, rgba(255,255,255,0.85)); }\n<\/style>\n\n<style id=\"lpr-md-hero\">\n    \/* Mother's Day overlay \u2014 scoped to the hero so nothing else changes *\/\n    .lpr .hero.hero-cream[data-md=\"on\"] .hero-eyebrow { display: none !important; }\n\n    \/* MD hero h1 \u2014 handwritten Caveat, two-color split per word *\/\n    .lpr .hero.hero-cream[data-md=\"on\"] h1 {\n        font-family: \"Caveat\", cursive !important;\n        font-weight: 600 !important;\n        font-size: clamp(48px, 6.5vw, 84px) !important;\n        line-height: 1.05 !important;\n        letter-spacing: -0.005em !important;\n        margin: 0 0 36px !important;\n        padding-bottom: 8px !important;\n    }\n    .lpr .hero.hero-cream[data-md=\"on\"] h1 .w-cream { color: var(--cream-50); }\n    .lpr .hero.hero-cream[data-md=\"on\"] h1 .w-ember { color: var(--ember-300); }\n    .lpr .hero.hero-cream[data-md=\"on\"] h1 br { display: block; content: \"\"; }\n    .lpr .hero.hero-cream[data-md=\"on\"] h1 .hand {\n        font-family: \"Caveat\", cursive !important;\n        color: var(--ember-300) !important;\n        font-weight: 600 !important;\n        font-size: 1em !important;\n        display: inline;\n        line-height: 1.15;\n    }\n    \/* MD hero sub \u2014 handwritten Caveat, larger, looser line height *\/\n    .lpr .hero.hero-cream[data-md=\"on\"] .hero-sub {\n        font-family: \"Caveat\", cursive !important;\n        font-weight: 500 !important;\n        font-size: clamp(24px, 2.2vw, 30px) !important;\n        line-height: 1.35 !important;\n        letter-spacing: 0.005em !important;\n        color: rgba(251, 244, 227, 0.92) !important;\n        max-width: 46ch !important;\n    }\n\n    .lpr .md-eyebrow {\n        display: inline-flex; align-items: center; gap: 14px;\n        margin-bottom: 28px; padding: 8px 16px 8px 14px;\n        border: 1px solid rgba(241, 231, 212, 0.35);\n        border-radius: 999px; background: rgba(0, 0, 0, 0.18);\n        font-family: \"Cormorant Garamond\", Georgia, serif; color: var(--cream-50);\n    }\n    .lpr .md-eyebrow .md-fete {\n        font-family: var(--font-body); font-size: 11px; font-weight: 600;\n        letter-spacing: 0.32em; text-transform: uppercase;\n        color: var(--cream-50); line-height: 1;\n    }\n    .lpr .md-stamp {\n        display: inline-flex; align-items: center; gap: 24px;\n        margin: 0 0 36px; padding: 22px 32px 22px 28px;\n        background: var(--cream-50);\n        border-radius: 16px;\n        max-width: 600px;\n        box-shadow: 0 18px 40px rgba(20, 10, 5, 0.45), 0 4px 12px rgba(20, 10, 5, 0.25);\n        position: relative;\n    }\n    .lpr .md-stamp::before {\n        content: \"\"; position: absolute; inset: 0;\n        border-radius: 16px;\n        border: 2px dashed rgba(196, 96, 31, 0.35);\n        margin: 5px;\n        pointer-events: none;\n    }\n    .lpr .md-stamp-num {\n        font-family: \"Cormorant Garamond\", Georgia, serif; font-style: italic;\n        font-size: 92px; font-weight: 600; line-height: 1;\n        color: #A34A1A; letter-spacing: -0.05em;\n    }\n    .lpr .md-stamp-num .minus { color: #C4601F; margin-right: 4px; }\n    .lpr .md-stamp-num .pct { font-size: 0.55em; }\n    .lpr .md-stamp-body {\n        display: flex; flex-direction: column; gap: 6px;\n        border-left: 1px solid rgba(61, 42, 29, 0.25); padding-left: 22px;\n    }\n    .lpr .md-stamp-body .l1 {\n        font-family: \"Cormorant Garamond\", Georgia, serif; font-style: italic;\n        font-size: 22px; color: var(--roast-900); line-height: 1.2; font-weight: 500;\n    }\n    .lpr .md-stamp-body .l2 {\n        font-family: var(--font-body); font-size: 12px; font-weight: 600;\n        letter-spacing: 0.22em; text-transform: uppercase; color: var(--roast-700);\n    }\n    .lpr .md-stamp-body .l2 strong {\n        font-family: var(--font-body); font-size: 13px; letter-spacing: 0.18em;\n        color: var(--cream-50); background: var(--ember-700); font-weight: 700;\n        padding: 4px 10px; border-radius: 4px; margin-left: 8px; text-transform: uppercase;\n    }\n    \/* Diagonal ribbon banner across the photo *\/\n    .lpr .md-ribbon {\n        position: absolute; z-index: 3;\n        top: 44px; right: -64px;\n        width: 340px;\n        background: var(--cream-50);\n        color: var(--roast-900);\n        text-align: center;\n        padding: 18px 22px;\n        transform: rotate(28deg);\n        box-shadow: 0 14px 32px rgba(20, 10, 5, 0.5), 0 0 0 1px rgba(61, 42, 29, 0.12) inset;\n        border-top: 1px solid rgba(61, 42, 29, 0.18);\n        border-bottom: 1px solid rgba(61, 42, 29, 0.18);\n        pointer-events: none;\n    }\n    .lpr .md-ribbon .r1 {\n        display: block;\n        font-family: var(--font-body);\n        font-size: 13px; font-weight: 700;\n        letter-spacing: 0.26em; text-transform: uppercase;\n        color: var(--ember-700);\n        line-height: 1; margin-bottom: 6px;\n    }\n    .lpr .md-ribbon .r2 {\n        display: block;\n        font-family: \"Cormorant Garamond\", Georgia, serif;\n        font-style: italic; font-weight: 600;\n        font-size: 34px; line-height: 1;\n        letter-spacing: 0.01em;\n        color: var(--roast-900);\n    }\n    .lpr .md-ribbon .r2 strong {\n        font-family: var(--font-body); font-style: normal;\n        font-weight: 700; letter-spacing: 0.18em;\n        font-size: 24px; vertical-align: 2px; margin-left: 6px;\n        color: var(--ember-700);\n    }\n    @media (max-width: 600px) {\n        .lpr .md-stamp { gap: 16px; padding: 16px 20px; max-width: 100%; }\n        .lpr .md-stamp-num { font-size: 64px; }\n        .lpr .md-stamp-body .l1 { font-size: 17px; }\n    }\n<\/style>\n\n<style id=\"lpr-hero-mobile\">\n    \/* ============================================================\n       Mobile-first refinements for the homepage hero\n       - centred copy and signature on phone for visual balance\n       - CTAs stack full-width and become thumb-friendly\n       - photo carries the screen on phone (~360px vs default 260px)\n       - h1 + sub sized down to phone reading rhythm\n       ============================================================ *\/\n\n    \/* Tablet & phone -- centre stacked column at \u2264960px *\/\n    @media (max-width: 960px) {\n        .lpr .hero.hero-cream h1 {\n            font-size: clamp(48px, 9vw, 72px) !important;\n            line-height: 1.02 !important;\n        }\n        .lpr .hero.hero-cream .hero-sub {\n            font-size: clamp(17px, 2.4vw, 19px) !important;\n        }\n        .lpr .hero.hero-cream .hero-copy {\n            text-align: center;\n            max-width: 560px;\n            margin: 0 auto;\n        }\n        .lpr .hero.hero-cream .hero-ctas { justify-content: center; }\n        .lpr .hero.hero-cream .hero-eyebrow {\n            display: inline-flex;\n            margin-left: auto;\n            margin-right: auto;\n        }\n        .lpr .hero.hero-cream .hero-signature {\n            display: block;\n            text-align: center;\n            margin-top: 14px;\n        }\n        .lpr .hero-art { max-width: 420px !important; }\n    }\n\n    \/* Phone -- tighten padding, stack CTAs, grow photo *\/\n    @media (max-width: 640px) {\n        .lpr .hero.hero-cream .hero-inner {\n            padding: 56px 20px 72px !important;\n            gap: 40px !important;\n        }\n        .lpr .hero.hero-cream h1 {\n            font-size: clamp(42px, 11vw, 60px) !important;\n            margin: 0 0 22px !important;\n        }\n        .lpr .hero.hero-cream .hero-sub {\n            font-size: 17px !important;\n            line-height: 1.55 !important;\n            margin: 0 0 28px !important;\n        }\n\n        \/* CTAs stack full-width with tap-target sizing *\/\n        .lpr .hero.hero-cream .hero-ctas {\n            flex-direction: column;\n            align-items: stretch;\n            gap: 10px;\n            width: 100%;\n            max-width: 360px;\n            margin-left: auto;\n            margin-right: auto;\n        }\n        .lpr .hero.hero-cream .hero-ctas .btn {\n            width: 100%;\n            justify-content: center;\n            padding: 16px 22px;\n            font-size: 16px;\n            min-height: 52px;\n        }\n\n        \/* Photo: larger than the 260px default so it carries the screen *\/\n        .lpr .hero-art { max-width: 360px !important; padding: 0; }\n        .lpr .hero-bag { transform: rotate(-2deg); }\n\n        \/* Caption sits a bit closer on phone *\/\n        .lpr .hero-caption { font-size: 18px; bottom: -34px; }\n    }\n\n    \/* Narrow phone *\/\n    @media (max-width: 380px) {\n        .lpr .hero.hero-cream h1 {\n            font-size: clamp(36px, 12vw, 50px) !important;\n        }\n        .lpr .hero.hero-cream .hero-sub { font-size: 16px !important; }\n        .lpr .hero.hero-cream .hero-eyebrow { font-size: 11px; }\n        .lpr .hero-art { max-width: 300px !important; }\n    }\n<\/style>\n\n<style id=\"lpr-other-mobile\">\n    \/* Picks: the CTA inside .pick-body is centered; on phone make it full-width *\/\n    @media (max-width: 640px) {\n        .lpr .pick-cta { width: 100%; justify-content: center; min-height: 48px; }\n        .lpr .pick-body { width: 100%; }\n        .lpr .pick { gap: 22px; }\n\n        \/* Quiz card: tighter padding on phone so copy doesn't feel cramped *\/\n        .lpr .quiz-card { padding: 44px 24px !important; }\n        .lpr .quiz-card .btn { width: 100%; justify-content: center; min-height: 52px; }\n\n        \/* Story: ghost button shouldn't be 100% wide on the dark bg, but should\n           have a comfortable tap target *\/\n        .lpr .story .btn { min-height: 48px; }\n\n        \/* How-it-works steps: looser on phone *\/\n        .lpr .how-step { padding: 0; }\n\n        \/* Why: tighten body copy on phone *\/\n        .lpr .why-body p { font-size: 16.5px !important; }\n        .lpr .why-kicker { font-size: 19px !important; }\n\n        \/* Reviews: tighter padding so quotes don't overflow *\/\n        .lpr .review { padding: 24px 20px; }\n        .lpr .review blockquote { font-size: 19px; }\n\n        \/* Section spacing trim *\/\n        .lpr .sec { padding: 64px 0 !important; }\n        .lpr .sec-head { margin-bottom: 36px !important; }\n    }\n<\/style>\n\n<script>\n    function toggleMobileNav(){\n        const drawer = document.getElementById('mobileNav');\n        const btn = document.querySelector('.hdr-burger');\n        const open = drawer.classList.toggle('open');\n        btn.setAttribute('aria-expanded', open);\n        drawer.setAttribute('aria-hidden', !open);\n        document.body.style.overflow = open ? 'hidden' : '';\n    }\n<\/script>\n\n<!-- ============ HERO ============ -->\n<div class=\"lpr\" data-lang=\"en\">\n    <script>\n        (function(){\n            var root = document.querySelector('.lpr');\n            if (root) root.dataset.lang = (typeof isFr !== 'undefined' && isFr) ? 'fr' : 'en';\n        })();\n    <\/script>\n\n    <!-- SEO: structured data for brand + reviews -->\n    <script type=\"application\/ld+json\">\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"LocalBusiness\",\n            \"@id\": \"https:\/\/lepetitroast.ca\/#business\",\n            \"name\": \"Le Petit Roast\",\n            \"description\": \"Montreal micro-roastery specializing in small-batch specialty coffee, roasted to order.\",\n            \"url\": \"https:\/\/lepetitroast.ca\",\n            \"image\": \"https:\/\/lepetitroast.ca\/logo.png\",\n            \"areaServed\": [\"CA\", \"US\"],\n            \"address\": {\"@type\": \"PostalAddress\",\"addressLocality\": \"Montr\u00e9al\",\"addressRegion\": \"QC\",\"addressCountry\": \"CA\"},\n            \"priceRange\": \"$$\",\n            \"aggregateRating\": {\"@type\": \"AggregateRating\",\"ratingValue\": \"5\",\"reviewCount\": \"3\",\"bestRating\": \"5\",\"worstRating\": \"1\"},\n            \"review\": [\n                {\"@type\":\"Review\",\"author\":{\"@type\":\"Person\",\"name\":\"Alex T.\"},\"reviewRating\":{\"@type\":\"Rating\",\"ratingValue\":\"5\",\"bestRating\":\"5\"},\"reviewBody\":\"Really great freshly roasted coffee! A wide selection to choose from. The coffee descriptions are really well done too!\"},\n                {\"@type\":\"Review\",\"author\":{\"@type\":\"Person\",\"name\":\"Josh J.\"},\"reviewRating\":{\"@type\":\"Rating\",\"ratingValue\":\"5\",\"bestRating\":\"5\"},\"reviewBody\":\"Not only is the brand adorable, but the coffee is actually amazing. This guy roasts this stuff FRESH and the selection is carefully curated from all around the globe. Delivery is top notch \u2014 I get my stuff imported to California and it's day 1 fresh right out of the bag.\"},\n                {\"@type\":\"Review\",\"author\":{\"@type\":\"Person\",\"name\":\"Lo\u00efc N.\"},\"reviewRating\":{\"@type\":\"Rating\",\"ratingValue\":\"5\",\"bestRating\":\"5\"},\"reviewBody\":\"A good variety of coffee with their own signature. The coffee is freshly prepared. No delivery problems. I finally have some really good coffee to offer my guests at home.\"}\n            ]\n        }\n    <\/script>\n\n    <section class=\"hero hero-cream\" data-hero-tone=\"dark\" style=\"background: linear-gradient(165deg, rgb(107, 58, 30) 0%, rgb(74, 38, 21) 100%);\">\n        <div class=\"container hero-inner\">\n            <div class=\"hero-copy\">\n                <div class=\"hero-eyebrow lpr-en\">Specialty coffee \u00b7 Montreal<\/div>\n                <div class=\"hero-eyebrow lpr-fr\">Caf\u00e9 de sp\u00e9cialit\u00e9 \u00b7 Montr\u00e9al<\/div>\n\n                <h1 class=\"lpr-en\">Small-batch coffee,<br><span class=\"hand\">roasted to order.<\/span><\/h1>\n                <h1 class=\"lpr-fr\">Caf\u00e9 en petits lots,<br><span class=\"hand\">torr\u00e9fi\u00e9 sur commande.<\/span><\/h1>\n\n                <p class=\"hero-sub lpr-en\">Single origins from bright to bold, plus one espresso blend. Roasted in Montreal, traceable beans, honest prices \u2014 shipped fresh across Canada and the US.<\/p>\n                <p class=\"hero-sub lpr-fr\">Des simples origines, du fruit\u00e9 au fonc\u00e9, plus un assemblage espresso. Torr\u00e9fi\u00e9 \u00e0 Montr\u00e9al, grains tra\u00e7ables, prix honn\u00eates \u2014 livr\u00e9 frais au Canada et aux \u00c9tats-Unis.<\/p>\n\n                <div class=\"hero-ctas\">\n                    <a class=\"btn btn-primary lpr-en\" href=\"\/coffees\/\">\n                        Shop all coffees\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n                    <\/a>\n                    <a class=\"btn btn-primary lpr-fr\" href=\"\/fr\/cafes\/\">\n                        Voir tous les caf\u00e9s\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n                    <\/a>\n                    <a class=\"btn btn-ghost\" href=\"#help-me-choose\">\n                        <span class=\"lpr-en\">Help me choose<\/span>\n                        <span class=\"lpr-fr\">Aide-moi \u00e0 choisir<\/span>\n                    <\/a>\n                <\/div>\n                <div class=\"hero-signature lpr-en\">\u2014 small-batch roasted in Montreal, shipped fresh<\/div>\n                <div class=\"hero-signature lpr-fr\">\u2014 torr\u00e9fi\u00e9 en petits lots \u00e0 Montr\u00e9al, livr\u00e9 frais<\/div>\n            <\/div>\n            <div class=\"hero-art\">\n                <div class=\"hero-bag\">\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 from Le Petit Roast\" data-alt-fr=\"Le Mantissa \u2014 sac de caf\u00e9 de sp\u00e9cialit\u00e9 br\u00e9silien, torr\u00e9faction moyenne, du Petit Roast\">\n                <\/div>\n                <div class=\"hero-caption lpr-en\">roasted weekly, in our drum<\/div>\n                <div class=\"hero-caption lpr-fr\">torr\u00e9fi\u00e9 chaque semaine, dans notre tambour<\/div>\n            <\/div>\n        <\/div>\n        <div class=\"hero-scroll\">\n            <span class=\"lpr-en\">scroll<\/span>\n            <span class=\"lpr-fr\">d\u00e9filer<\/span>\n            <svg viewBox=\"0 0 16 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M8 4v16M3 15l5 5 5-5\"><\/path><\/svg>\n        <\/div>\n    <\/section>\n\n    <!-- ============ MY PICKS ============ -->\n    <section class=\"sec picks\">\n        <div class=\"container\">\n            <div class=\"sec-head\" style=\"text-align:center; margin:0 auto 56px; max-width: 680px;\">\n                <div class=\"sec-label lpr-en\">What to try<\/div>\n                <div class=\"sec-label lpr-fr\">\u00c0 essayer<\/div>\n                <h2 class=\"lpr-en\">My picks <span class=\"hand\">right now.<\/span><\/h2>\n                <h2 class=\"lpr-fr\">Mes coups de c\u0153ur <span class=\"hand\">du moment.<\/span><\/h2>\n                <p class=\"lead lpr-en\">Two coffees I'd pour you if you walked into my kitchen. One classic done properly, one decaf that'll surprise you. Both are the bag people come back for.<\/p>\n                <p class=\"lead lpr-fr\">Deux caf\u00e9s que je te servirais si tu d\u00e9barquais dans ma cuisine. Un classique bien fait, un d\u00e9caf qui va te surprendre. Les deux, ce sont les sacs que les gens rach\u00e8tent.<\/p>\n            <\/div>\n\n            <div class=\"picks-grid\">\n\n                <article class=\"pick\">\n                    <div class=\"pick-bag\">\n                        <img decoding=\"async\" src=\"https:\/\/lepetitroast.com\/wp-content\/uploads\/2026\/04\/Le-Mantissa-Le-Petit-Roast-1.webp\" alt=\"Le Mantissa -- Brazilian medium roast specialty coffee bag\" data-alt-fr=\"Le Mantissa \u2014 sac de caf\u00e9 de sp\u00e9cialit\u00e9 br\u00e9silien, torr\u00e9faction moyenne\">\n                    <\/div>\n                    <div class=\"pick-body\">\n                        <div class=\"pick-eyebrow lpr-en\">The classic pick<\/div>\n                        <div class=\"pick-eyebrow lpr-fr\">Le classique<\/div>\n                        <h3>Le Mantissa<\/h3>\n                        <div class=\"pick-origin lpr-en\">Brazil - Minas Gerais<\/div>\n                        <div class=\"pick-origin lpr-fr\">Br\u00e9sil \u2014 Minas Gerais<\/div>\n                        <p class=\"lpr-en\">My bestseller for a reason. Caramel, hazelnut, chocolate, and a clean sweetness that just works \u2013 espresso, filter, milk drinks, anything. The kind of coffee people reorder without trying the rest of the menu first.<\/p>\n                        <p class=\"lpr-fr\">Mon best-seller, pour une raison. Caramel, noisette, chocolat, et une douceur nette qui marche partout \u2014 espresso, filtre, boissons lact\u00e9es, peu importe. Le genre de caf\u00e9 que les gens recommandent \u00e0 tout le monde sans avoir essay\u00e9 le reste du menu.<\/p>\n                        <div class=\"pick-price lpr-en\">from $20 <span class=\"per\">\/ 300g<\/span><\/div>\n                        <div class=\"pick-price lpr-fr\">\u00e0 partir de 20 $ <span class=\"per\">\/ 300 g<\/span><\/div>\n                        <a class=\"btn btn-primary pick-cta lpr-en\" href=\"\/shop\/brazil-mantissa\/\">\n                            Order this one\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n                        <\/a>\n                        <a class=\"btn btn-primary pick-cta lpr-fr\" href=\"\/fr\/shop\/bresil-mantissa\/\">\n                            Commander celui-ci\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n                        <\/a>\n                    <\/div>\n                <\/article>\n\n                <article class=\"pick\">\n                    <div class=\"pick-bag\">\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 -- Colombian decaf specialty coffee bag\" data-alt-fr=\"Decaf Red Plum \u2014 sac de caf\u00e9 d\u00e9caf de sp\u00e9cialit\u00e9 colombien\">\n                    <\/div>\n                    <div class=\"pick-body\">\n                        <div class=\"pick-eyebrow lpr-en\">The decaf pick<\/div>\n                        <div class=\"pick-eyebrow lpr-fr\">Le d\u00e9caf<\/div>\n                        <h3>Decaf Red Plum<\/h3>\n                        <div class=\"pick-origin lpr-en\">Colombia - Cauca<\/div>\n                        <div class=\"pick-origin lpr-fr\">Colombie \u2014 Cauca<\/div>\n                        <p class=\"lpr-en\">Plum, red berries, and caramel in the background. Clean, balanced, and interesting enough to make you slow down. Oh - and it's decaf. From Finca El Paraiso in Colombia, where Diego Bermudez has turned decaf into something nobody expected.<\/p>\n                        <p class=\"lpr-fr\">Prune, baies rouges, et un caramel en arri\u00e8re-plan. Propre, \u00e9quilibr\u00e9, et assez int\u00e9ressant pour te faire ralentir. Ah \u2014 et c'est un d\u00e9caf. De la Finca El Paraiso en Colombie, o\u00f9 Diego Bermudez a transform\u00e9 le d\u00e9caf en quelque chose que personne n'attendait.<\/p>\n                        <div class=\"pick-price lpr-en\">$29 <span class=\"per\">\/ 300g<\/span><\/div>\n                        <div class=\"pick-price lpr-fr\">29 $ <span class=\"per\">\/ 300 g<\/span><\/div>\n                        <a class=\"btn btn-primary pick-cta lpr-en\" href=\"\/shop\/decaf-red-plum-colombia\/\">\n                            Order this one\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n                        <\/a>\n                        <a class=\"btn btn-primary pick-cta lpr-fr\" href=\"\/fr\/shop\/decaf-red-plum-colombie\/\">\n                            Commander celui-ci\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n                        <\/a>\n                    <\/div>\n                <\/article>\n\n            <\/div>\n\n            <div class=\"picks-foot\">\n                <a class=\"link-u lpr-en\" href=\"\/coffees\/\">See all coffees \u2192<\/a>\n                <a class=\"link-u lpr-fr\" href=\"\/fr\/cafes\/\">Voir tous les caf\u00e9s \u2192<\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- ============ HOW IT WORKS ============ -->\n    <section class=\"sec how\">\n        <div class=\"container\">\n            <div class=\"sec-head\" style=\"text-align:center; margin:0 auto 56px; max-width: 640px;\">\n                <div class=\"sec-label lpr-en\">How it works<\/div>\n                <div class=\"sec-label lpr-fr\">Comment \u00e7a marche<\/div>\n                <h2 class=\"lpr-en\">Fresh coffee, <span class=\"hand\">simple process.<\/span><\/h2>\n                <h2 class=\"lpr-fr\">Caf\u00e9 frais, <span class=\"hand\">processus simple.<\/span><\/h2>\n            <\/div>\n            <div class=\"how-grid\">\n                <div class=\"how-step\">\n                    <div class=\"how-n\">1<\/div>\n                    <h3 class=\"lpr-en\">Browse<\/h3>\n                    <h3 class=\"lpr-fr\">Parcourir<\/h3>\n                    <p class=\"lpr-en\">Find your roast by flavor, not jargon.<\/p>\n                    <p class=\"lpr-fr\">Trouve ton caf\u00e9 selon les saveurs, pas le jargon.<\/p>\n                <\/div>\n                <div class=\"how-step\">\n                    <div class=\"how-n\">2<\/div>\n                    <h3 class=\"lpr-en\">Order<\/h3>\n                    <h3 class=\"lpr-fr\">Commander<\/h3>\n                    <p class=\"lpr-en\">I roast and pack it fresh, the week it ships.<\/p>\n                    <p class=\"lpr-fr\">Je le torr\u00e9fie et l'emballe frais, la semaine o\u00f9 il part.<\/p>\n                <\/div>\n                <div class=\"how-step\">\n                    <div class=\"how-n\">3<\/div>\n                    <h3 class=\"lpr-en\">Enjoy<\/h3>\n                    <h3 class=\"lpr-fr\">Savourer<\/h3>\n                    <p class=\"lpr-en\">On your counter in days. Canada-wide.<\/p>\n                    <p class=\"lpr-fr\">Sur ton comptoir en quelques jours. Partout au Canada.<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"how-foot lpr-en\">\n                Free shipping over <strong>$45 in QC\/ON<\/strong> \u00a0\u2022\u00a0 over <strong>$60 across Canada<\/strong> \u00a0\u2022\u00a0 shipping to <strong>Canada & USA<\/strong>\n            <\/div>\n            <div class=\"how-foot lpr-fr\">\n                Livraison gratuite \u00e0 partir de <strong>45 $ au QC\/ON<\/strong> \u00a0\u2022\u00a0 \u00e0 partir de <strong>60 $ partout au Canada<\/strong> \u00a0\u2022\u00a0 exp\u00e9dition au <strong>Canada et aux \u00c9tats-Unis<\/strong>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- ============ WHY SMALL-BATCH ============ -->\n    <section class=\"sec why\">\n        <div class=\"container why-grid\">\n            <div class=\"why-head\">\n                <div class=\"sec-label lpr-en\">The whole point<\/div>\n                <div class=\"sec-label lpr-fr\">L'id\u00e9e de base<\/div>\n                <h2 class=\"lpr-en\">Small <span class=\"hand\">on purpose.<\/span><\/h2>\n                <h2 class=\"lpr-fr\">Petit <span class=\"hand\">par choix.<\/span><\/h2>\n            <\/div>\n            <div class=\"why-body\">\n                <p class=\"lpr-en\">One person, one roaster, and that's the plan. The staples you come back for -- Le Mantissa, the classics -- are always on the menu. Small-batch just means I can also bring in exciting new origins alongside them: seasonal lots, rare finds, coffees I can't wait to share.<\/p>\n                <p class=\"lpr-fr\">Une personne, un torr\u00e9facteur, et c'est le plan. Les incontournables que tu rach\u00e8tes \u2014 Le Mantissa, les classiques \u2014 sont toujours au menu. Les petits lots, \u00e7a veut juste dire que je peux aussi ramener de nouvelles origines int\u00e9ressantes \u00e0 c\u00f4t\u00e9 : lots saisonniers, trouvailles rares, caf\u00e9s que j'ai h\u00e2te de partager.<\/p>\n                <p class=\"lpr-en\">Everything is roasted to order, tasted before it leaves, and written up by the person who actually drank it. No warehouses, no mystery blends, no compromise.<\/p>\n                <p class=\"lpr-fr\">Tout est torr\u00e9fi\u00e9 sur commande, go\u00fbt\u00e9 avant d'\u00eatre exp\u00e9di\u00e9, et d\u00e9crit par la personne qui l'a vraiment bu. Pas d'entrep\u00f4ts, pas de m\u00e9langes myst\u00e8res, pas de compromis.<\/p>\n                <p class=\"why-kicker lpr-en\">That's the whole reason this exists.<\/p>\n                <p class=\"why-kicker lpr-fr\">C'est la raison d'\u00eatre de tout \u00e7a.<\/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\">Find your roast<\/div>\n                    <div class=\"sec-label lpr-fr\">Trouve ton caf\u00e9<\/div>\n                    <h2 class=\"lpr-en\">Not sure <span class=\"hand\">where to start?<\/span><\/h2>\n                    <h2 class=\"lpr-fr\">Pas s\u00fbr <span class=\"hand\">par o\u00f9 commencer\u00a0?<\/span><\/h2>\n                    <p class=\"lead lpr-en\">Three quick questions \u2013 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 dirige 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\"><\/path><\/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            function swap(){\n                document.querySelectorAll('.lpr [data-alt-fr]').forEach(function(el){ el.alt = el.dataset.altFr; });\n                document.querySelectorAll('.lpr [data-title-fr]').forEach(function(el){ el.title = el.dataset.titleFr; });\n            }\n            if (typeof isFr !== 'undefined' && isFr) {\n                if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', swap); else swap();\n            }\n        })();\n    <\/script>\n\n    <!-- ============ STORY ============ -->\n    <section class=\"sec story\">\n        <div class=\"container story-grid\">\n            <div class=\"story-photo\">\n                <img decoding=\"async\" src=\"https:\/\/lepetitroast.com\/wp-content\/uploads\/2026\/05\/thomas_le_petit_roast.webp\" alt=\"Thomas, founder of Le Petit Roast, at the roaster in Montreal\" data-alt-fr=\"Thomas, fondateur de Le Petit Roast, \u00e0 la torr\u00e9faction \u00e0 Montr\u00e9al\">\n                <div class=\"story-badge lpr-en\">roasted in<br>Montreal since '24<\/div>\n                <div class=\"story-badge lpr-fr\">torr\u00e9fi\u00e9 \u00e0<br>Montr\u00e9al depuis 2024<\/div>\n            <\/div>\n            <div>\n                <div class=\"sec-label lpr-en\">About me<\/div>\n                <div class=\"sec-label lpr-fr\">\u00c0 propos de moi<\/div>\n                <h2 class=\"lpr-en\">One person. <span class=\"hand\">One roaster.<\/span><\/h2>\n                <h2 class=\"lpr-fr\">Une personne. <span class=\"hand\">Un torr\u00e9facteur.<\/span><\/h2>\n                <p class=\"lpr-en\">I'm Thomas \u2013 a software engineer who spent years drinking instant coffee on autopilot, then bought an espresso machine out of curiosity and never looked back. Le Petit Roast started in my kitchen with a pan on the stove, moved to the oven, then a gas burner with a drum.<\/p>\n                <p class=\"lpr-fr\">Je suis Thomas \u2014 un ing\u00e9nieur logiciel qui a pass\u00e9 des ann\u00e9es \u00e0 boire du caf\u00e9 instantan\u00e9 en mode automatique, puis qui a achet\u00e9 une machine espresso par curiosit\u00e9 et qui n'est jamais revenu en arri\u00e8re. Le Petit Roast a commenc\u00e9 dans ma cuisine avec une po\u00eale sur le feu, puis c'est pass\u00e9 au four, puis \u00e0 un br\u00fbleur \u00e0 gaz avec un tambour.<\/p>\n                <p class=\"lpr-en\">Small batches, roasted to order, traceable beans, honest prices. Every batch gets tracked and tasted before it leaves \u2014 engineer's habit.<\/p>\n                <p class=\"lpr-fr\">Petits lots, torr\u00e9fi\u00e9s sur commande, grains tra\u00e7ables, prix honn\u00eates. Chaque lot est suivi et go\u00fbt\u00e9 avant l'envoi \u2014 habitude d'ing\u00e9nieur.<\/p>\n                <div class=\"story-ctas\">\n                    <a class=\"btn btn-ghost-on-photo\" href=\"\/about-us\/\">\n                        <span class=\"lpr-en\">Read the full story<\/span>\n                        <span class=\"lpr-fr\">Lire l'histoire compl\u00e8te<\/span>\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n                    <\/a>\n                <\/div>\n                <div>\n                    <span class=\"signature lpr-en\">-- Thomas, Montreal<\/span>\n                    <span class=\"signature lpr-fr\">\u2014 Thomas, Montr\u00e9al<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- ============ REVIEWS ============ -->\n    <section class=\"sec reviews\">\n        <div class=\"container\">\n            <div class=\"sec-head\" style=\"text-align: center; margin-left: auto; margin-right: auto; max-width: 600px;\">\n                <div class=\"sec-label lpr-en\">From people who drink it<\/div>\n                <div class=\"sec-label lpr-fr\">De gens qui le boivent<\/div>\n                <h2 class=\"lpr-en\">Don't take <span class=\"hand\">my word<\/span> for it.<\/h2>\n                <h2 class=\"lpr-fr\">Me crois pas <span class=\"hand\">sur parole.<\/span><\/h2>\n            <\/div>\n            <div class=\"reviews-grid\">\n\n                <article class=\"review\">\n                    <div class=\"stars\">*****<\/div>\n                    <blockquote class=\"lpr-en\">Really great freshly roasted coffee! A wide selection to choose from. The coffee descriptions are really well done too!<\/blockquote>\n                    <blockquote class=\"lpr-fr\">Vraiment bon caf\u00e9 fra\u00eechement torr\u00e9fi\u00e9\u00a0! Une belle s\u00e9lection \u00e0 choisir. Les descriptions de caf\u00e9 sont super bien faites aussi\u00a0!<\/blockquote>\n                    <footer>\n                        <div class=\"av\">AT<\/div>\n                        <div class=\"who\">Alex T.<\/div>\n                    <\/footer>\n                <\/article>\n\n                <article class=\"review\">\n                    <div class=\"stars\">*****<\/div>\n                    <blockquote class=\"lpr-en\">Not only is the brand adorable, but the coffee is actually amazing. This guy roasts this stuff FRESH and the selection is carefully curated from all around the globe. Delivery is top notch -- I get my stuff imported to California and it's day 1 fresh right out of the bag. You can't go wrong w\/ Le Petit Roast!<\/blockquote>\n                    <blockquote class=\"lpr-fr\">Non seulement la marque est adorable, mais le caf\u00e9 est vraiment d\u00e9licieux. Ce gars-l\u00e0 torr\u00e9fie \u00e7a FRAIS et la s\u00e9lection est soigneusement choisie un peu partout sur la plan\u00e8te. La livraison est top \u2014 je le fais importer en Californie et c'est frais jour 1 \u00e0 la sortie du sac. Tu peux pas te tromper avec Le Petit Roast\u00a0!<\/blockquote>\n                    <footer>\n                        <div class=\"av\">JJ<\/div>\n                        <div class=\"who\">Josh J.<\/div>\n                    <\/footer>\n                <\/article>\n\n                <article class=\"review\">\n                    <div class=\"stars\">*****<\/div>\n                    <blockquote class=\"lpr-en\">A good variety of coffee with their own signature. The coffee is freshly prepared. No delivery problems. I finally have some really good coffee to offer my guests at home. It's a must. I mean, what are you waiting for to order some?<\/blockquote>\n                    <blockquote class=\"lpr-fr\">Une bonne vari\u00e9t\u00e9 de caf\u00e9s, chacun avec sa propre signature. Le caf\u00e9 est pr\u00e9par\u00e9 frais. Aucun probl\u00e8me de livraison. J'ai enfin du bon caf\u00e9 \u00e0 offrir \u00e0 mes invit\u00e9s. C'est un incontournable. Bon, qu'est-ce que tu attends pour en commander\u00a0?<\/blockquote>\n                    <footer>\n                        <div class=\"av\">LN<\/div>\n                        <div class=\"who\">Lo\u00efc N.<\/div>\n                    <\/footer>\n                <\/article>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- ============ TWEAKS ============ -->\n    <div class=\"tweaks-panel\" id=\"tweaksPanel\" role=\"dialog\" aria-label=\"Tweaks\">\n        <h3>Tweaks<\/h3>\n        <p class=\"tweaks-sub\">Remember -- coffee is dark.<\/p>\n        <label>Hero background<\/label>\n        <div class=\"tweaks-swatches\" id=\"tweaksHeroSwatches\"><\/div>\n    <\/div>\n\n    <script>\n        (function(){\n            const TWEAK_DEFAULTS = \/*EDITMODE-BEGIN*\/{\n                \"heroBg\": \"cortado\"\n            }\/*EDITMODE-END*\/;\n\n            const HERO_BGS = [\n                { id: \"cream\",    name: \"Cream\",    tone: \"light\", bg: \"var(--cream-50)\" },\n                { id: \"honey\",    name: \"Honey\",    tone: \"light\", bg: \"#F1E2BD\" },\n                { id: \"latte\",    name: \"Latte\",    tone: \"light\", bg: \"#E8D2AE\" },\n                { id: \"cortado\",  name: \"Cortado\",  tone: \"dark\",  bg: \"linear-gradient(165deg, #6B3A1E 0%, #4A2615 100%)\" },\n                { id: \"espresso\", name: \"Espresso\", tone: \"dark\",  bg: \"linear-gradient(165deg, #3D2A1D 0%, #21140C 100%)\" },\n                { id: \"stout\",    name: \"Stout\",    tone: \"dark\",  bg: \"linear-gradient(165deg, #2A1B12 0%, #130A05 100%)\" },\n                { id: \"mocha\",    name: \"Mocha\",    tone: \"dark\",  bg: \"linear-gradient(165deg, #4A2C1A 0%, #2D170C 100%)\" },\n                { id: \"noir\",     name: \"Noir\",     tone: \"dark\",  bg: \"#0E0906\" }\n            ];\n\n            const state = Object.assign({}, TWEAK_DEFAULTS);\n            const panel = document.getElementById('tweaksPanel');\n            const swatchHost = document.getElementById('tweaksHeroSwatches');\n            const hero = document.querySelector('.hero.hero-cream');\n\n            function applyHeroBg(id){\n                const entry = HERO_BGS.find(b => b.id === id) || HERO_BGS[0];\n                if (hero) {\n                    hero.style.background = entry.bg;\n                    hero.setAttribute('data-hero-tone', entry.tone);\n                }\n                swatchHost.querySelectorAll('.tweaks-swatch').forEach(el => {\n                    el.setAttribute('aria-pressed', el.dataset.id === entry.id ? 'true' : 'false');\n                });\n            }\n\n            function renderSwatches(){\n                swatchHost.innerHTML = '';\n                HERO_BGS.forEach(b => {\n                    const btn = document.createElement('button');\n                    btn.className = 'tweaks-swatch';\n                    btn.dataset.id = b.id;\n                    btn.type = 'button';\n                    btn.setAttribute('aria-label', b.name);\n                    btn.style.background = b.bg;\n                    const label = document.createElement('span');\n                    label.className = 'tweaks-swatch-name' + (b.tone === 'light' ? ' dark' : '');\n                    label.textContent = b.name;\n                    btn.appendChild(label);\n                    btn.addEventListener('click', () => {\n                        state.heroBg = b.id;\n                        applyHeroBg(b.id);\n                        window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { heroBg: b.id } }, '*');\n                    });\n                    swatchHost.appendChild(btn);\n                });\n            }\n\n            renderSwatches();\n            applyHeroBg(state.heroBg);\n\n            window.addEventListener('message', (e) => {\n                const d = e.data || {};\n                if (d.type === '__activate_edit_mode') panel.classList.add('open');\n                else if (d.type === '__deactivate_edit_mode') panel.classList.remove('open');\n            });\n            window.parent.postMessage({ type: '__edit_mode_available' }, '*');\n        })();\n    <\/script>\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":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-2","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>Le Petit Roast | Fresh-Roasted Specialty Coffee from Montreal<\/title>\n<meta name=\"description\" content=\"Small-batch specialty coffee roasted fresh to order in Montreal. Traceable beans, honest prices, free shipping $45+ QC\/ON, $60+ across Canada.\" \/>\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\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Le Petit Roast | Fresh-Roasted Specialty Coffee from Montreal\" \/>\n<meta property=\"og:description\" content=\"Small-batch specialty coffee roasted fresh to order in Montreal. Traceable beans, honest prices, free shipping $45+ QC\/ON, $60+ across Canada.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lepetitroast.com\/fr\/\" \/>\n<meta property=\"og:site_name\" content=\"Le Petit Roast\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-19T00:46:36+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=\"34 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/lepetitroast.com\\\/\",\"url\":\"https:\\\/\\\/lepetitroast.com\\\/\",\"name\":\"Le Petit Roast | Fresh-Roasted Specialty Coffee from Montreal\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/lepetitroast.com\\\/#website\"},\"datePublished\":\"2020-01-06T14:15:05+00:00\",\"dateModified\":\"2026-05-19T00:46:36+00:00\",\"description\":\"Small-batch specialty coffee roasted fresh to order in Montreal. Traceable beans, honest prices, free shipping $45+ QC\\\/ON, $60+ across Canada.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/lepetitroast.com\\\/#breadcrumb\"},\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/lepetitroast.com\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/lepetitroast.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/lepetitroast.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@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":"Le Petit Roast | Caf\u00e9 de sp\u00e9cialit\u00e9 torr\u00e9fi\u00e9 frais \u00e0 Montr\u00e9al","description":"Caf\u00e9 de sp\u00e9cialit\u00e9 torr\u00e9fi\u00e9 en petits lots \u00e0 la commande \u00e0 Montr\u00e9al. Grains tra\u00e7ables, prix honn\u00eates, livraison gratuite 45$+ QC\/ON, 60$+ reste du Canada.","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\/","og_locale":"fr_CA","og_type":"article","og_title":"Le Petit Roast | Fresh-Roasted Specialty Coffee from Montreal","og_description":"Small-batch specialty coffee roasted fresh to order in Montreal. Traceable beans, honest prices, free shipping $45+ QC\/ON, $60+ across Canada.","og_url":"https:\/\/lepetitroast.com\/fr\/","og_site_name":"Le Petit Roast","article_modified_time":"2026-05-19T00:46:36+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimation du temps de lecture":"34 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/lepetitroast.com\/","url":"https:\/\/lepetitroast.com\/","name":"Le Petit Roast | Caf\u00e9 de sp\u00e9cialit\u00e9 torr\u00e9fi\u00e9 frais \u00e0 Montr\u00e9al","isPartOf":{"@id":"https:\/\/lepetitroast.com\/#website"},"datePublished":"2020-01-06T14:15:05+00:00","dateModified":"2026-05-19T00:46:36+00:00","description":"Caf\u00e9 de sp\u00e9cialit\u00e9 torr\u00e9fi\u00e9 en petits lots \u00e0 la commande \u00e0 Montr\u00e9al. Grains tra\u00e7ables, prix honn\u00eates, livraison gratuite 45$+ QC\/ON, 60$+ reste du Canada.","breadcrumb":{"@id":"https:\/\/lepetitroast.com\/#breadcrumb"},"inLanguage":"fr-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lepetitroast.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/lepetitroast.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lepetitroast.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@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\/2","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":20,"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":113252,"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/pages\/2\/revisions\/113252"}],"wp:attachment":[{"href":"https:\/\/lepetitroast.com\/fr\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}