@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Lora:ital,wght@0,600;1,400&display=swap');
:root{
  --ink:#0f172a;--ink2:#334155;--ink3:#64748b;--ink4:#94a3b8;
  --bg:#fff;--surf:#f8fafc;--surf2:#f1f5f9;--bdr:#e2e8f0;--bdr2:#cbd5e1;
  --blue:#1e40af;--bluem:#2563eb;--bluel:#eff6ff;--blueb:#bfdbfe;
  --green:#15803d;--greenl:#f0fdf4;--greenb:#bbf7d0;
  --amber:#b45309;--amberl:#fffbeb;
  --red:#dc2626;--coffee:#1c1007;--crema:#e8d5b0;
  --r:6px;--rl:12px;--rxl:20px;
  --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shm:0 4px 20px rgba(0,0,0,.09);
  --font:'DM Sans',-apple-system,sans-serif;--serif:'Lora',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.cafe-wrap{font-family:var(--font);color:var(--ink);line-height:1.6;font-size:14px}
.fmt-svg{width:16px;height:16px;vertical-align:middle;margin-right:4px}

/* ── HERO ── */
.cafe-hero{background:var(--coffee);position:relative;overflow:hidden}
.cafe-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='30' cy='30' rx='14' ry='10' transform='rotate(-30 30 30)' fill='none' stroke='rgba(255,255,255,.03)' stroke-width='1'/%3E%3C/svg%3E") repeat;pointer-events:none}
.cafe-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 100% at 100% 0%,rgba(37,99,235,.2),transparent),radial-gradient(ellipse 50% 80% at 0% 100%,rgba(180,83,9,.18),transparent);pointer-events:none}
.cafe-hero-in{max-width:1160px;margin:0 auto;padding:60px 24px 52px;position:relative;z-index:1;display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start}
.cafe-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--crema);opacity:.75;margin-bottom:16px}
.cafe-eyebrow::before{content:'';width:24px;height:1px;background:currentColor}
.cafe-h1{font-family:var(--serif);font-size:clamp(28px,4vw,48px);font-weight:600;color:#fff;line-height:1.15;margin-bottom:14px}
.cafe-h1 em{font-style:italic;color:var(--crema)}
.cafe-sub{font-size:15px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:22px}

/* Barre de recherche hero */
.cafe-search-wrap{position:relative;margin-bottom:28px}
.cafe-search-box{display:flex;align-items:center;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);border-radius:50px;padding:0 16px;gap:10px;transition:all .2s;backdrop-filter:blur(8px)}
.cafe-search-box:focus-within{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.5);box-shadow:0 0 0 3px rgba(255,255,255,.1)}
.cafe-search-ico{width:18px;height:18px;color:rgba(255,255,255,.6);flex-shrink:0}
.cafe-search-input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font);font-size:15px;color:#fff;padding:13px 0}
.cafe-search-input::placeholder{color:rgba(255,255,255,.45)}
.cafe-search-clear{background:rgba(255,255,255,.15);border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cafe-search-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border-radius:var(--rl);box-shadow:var(--shm);overflow:hidden;z-index:100;display:none}
.cafe-search-suggest.open{display:block}
.cafe-suggest-item{padding:10px 16px;cursor:pointer;font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:10px;transition:background .1s}
.cafe-suggest-item:hover{background:var(--surf)}
.cafe-suggest-item strong{color:var(--ink);font-weight:700}
.cafe-suggest-price{margin-left:auto;font-size:12px;font-weight:700;color:var(--green)}

.cafe-kpis{display:flex;gap:24px;flex-wrap:wrap}
.cafe-kpi{display:flex;flex-direction:column;gap:2px}
.cafe-kpi-v{font-size:24px;font-weight:800;color:#fff;line-height:1}
.cafe-kpi-l{font-size:11px;color:rgba(255,255,255,.45);font-weight:500}

/* Top 5 */
.cafe-hero-rank{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--rxl);padding:6px;backdrop-filter:blur(8px)}
.cafe-rank-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);padding:10px 14px 8px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px}
.cafe-rank-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--rl);text-decoration:none;transition:background .12s}
.cafe-rank-row:hover{background:rgba(255,255,255,.08)}
.cafe-rank-n{width:22px;font-size:14px;text-align:center;flex-shrink:0;color:rgba(255,255,255,.4)}
.cafe-rank-n.gold{color:#fbbf24}
.cafe-rank-ico{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);flex-shrink:0}
.cafe-rank-ico .fmt-svg{width:18px;height:18px;margin:0}
.cafe-rank-info{flex:1;min-width:0}
.cafe-rank-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cafe-rank-meta{font-size:10px;color:rgba(255,255,255,.38);margin-top:1px}
.cafe-rank-right{flex-shrink:0;text-align:right}
.cafe-rank-price{display:block;font-size:13px;font-weight:800;color:#86efac}
.cafe-rank-unit{font-size:10px;color:rgba(255,255,255,.35)}
.cafe-rank-arrow{font-size:14px;color:rgba(255,255,255,.3);flex-shrink:0;transition:transform .15s,color .15s}
.cafe-rank-row:hover .cafe-rank-arrow{transform:translateX(3px);color:rgba(255,255,255,.7)}
.cafe-rank-footer{text-align:center;font-size:10px;color:rgba(255,255,255,.25);padding:8px 0 4px;letter-spacing:.05em}

/* ── ONGLETS FORMAT ── */
.cafe-fmts-bar{background:var(--bg);border-bottom:1px solid var(--bdr);box-shadow:var(--sh);position:sticky;top:0;z-index:50}
.cafe-fmts-in{max-width:1160px;margin:0 auto;padding:0 24px;display:flex;overflow-x:auto;scrollbar-width:none}
.cafe-fmts-in::-webkit-scrollbar{display:none}
.cafe-fmt-tab{display:flex;align-items:center;gap:5px;padding:13px 16px;border:none;border-bottom:2.5px solid transparent;background:transparent;font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink3);cursor:pointer;white-space:nowrap;transition:all .15s;position:relative;bottom:-1px}
.cafe-fmt-tab:hover{color:var(--ink);background:var(--surf)}
.cafe-fmt-tab.active{color:var(--bluem);border-bottom-color:var(--bluem)}
.cafe-fmt-tab .fmt-svg{color:currentColor}
.fmt-cnt{font-size:11px;font-weight:700;background:var(--surf2);color:var(--ink4);padding:1px 7px;border-radius:10px;margin-left:2px}
.cafe-fmt-tab.active .fmt-cnt{background:var(--bluem);color:#fff}

/* ── CORPS ── */
.cafe-main{max-width:1160px;margin:0 auto;padding:24px 24px 80px}

/* Bandeau recherche */
.cafe-search-banner{display:flex;align-items:center;justify-content:space-between;background:var(--bluel);border:1px solid var(--blueb);border-radius:var(--rl);padding:10px 16px;margin-bottom:16px;font-size:13px;color:var(--blue)}
.cafe-search-banner button{background:none;border:none;color:var(--blue);font-weight:700;cursor:pointer;font-family:var(--font);font-size:12px}

/* En-tête */
.cafe-comp-hd{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.cafe-comp-title{font-size:20px;font-weight:800;letter-spacing:-.3px;margin-bottom:3px}
.cafe-comp-sub{font-size:13px;color:var(--ink3)}
.cafe-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cafe-badge{font-size:12px;font-weight:500;padding:4px 12px;border-radius:20px;border:1px solid var(--bdr);background:var(--surf);color:var(--ink3);white-space:nowrap}
.cafe-badge strong{color:var(--ink)}
.cafe-badge.ok{background:var(--greenl);border-color:var(--greenb);color:var(--green)}

/* ── LAYOUT ── */
.cafe-layout{display:grid;grid-template-columns:210px 1fr;gap:18px;align-items:start}

/* ── SIDEBAR ── */
.cafe-sidebar{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden;position:sticky;top:56px;box-shadow:var(--sh);max-height:calc(100vh - 80px);overflow-y:auto}
.cafe-sb-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bdr);background:var(--surf);position:sticky;top:0;z-index:10}
.cafe-sb-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.cafe-sb-reset{background:none;border:none;font-family:var(--font);font-size:12px;font-weight:600;color:var(--red);cursor:pointer;padding:0}
.cafe-fg{padding:11px 14px;border-bottom:1px solid var(--bdr)}
.cafe-fg:last-child{border-bottom:none}
.cafe-fg-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink4);margin-bottom:7px}
.cafe-fg-search input{width:100%;padding:7px 10px;border:1px solid var(--bdr2);border-radius:var(--r);font-family:var(--font);font-size:13px;color:var(--ink);outline:none;transition:border .15s}
.cafe-fg-search input:focus{border-color:var(--bluem)}
.cafe-chips{display:flex;flex-wrap:wrap;gap:5px}
.cafe-chip{font-size:11px;font-weight:500;padding:3px 9px;border-radius:12px;border:1px solid var(--bdr2);background:var(--bg);color:var(--ink3);cursor:pointer;transition:all .12s;white-space:nowrap;font-family:var(--font)}
.cafe-chip:hover{border-color:var(--bluem);color:var(--blue)}
.cafe-chip.on{background:var(--bluel);border-color:var(--blueb);color:var(--blue);font-weight:700}
.cafe-range{width:100%;margin:8px 0 4px;accent-color:var(--bluem);cursor:pointer}
.cafe-range-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--ink4)}

/* Filtres actifs tags */
#cafe-filter-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.filter-tag{font-size:11px;padding:3px 8px;background:var(--bluel);border:1px solid var(--blueb);color:var(--blue);border-radius:10px;display:flex;align-items:center;gap:4px;cursor:pointer}
.filter-tag:hover{background:var(--blueb)}

/* ── TABLEAU ── */
.cafe-tbl-zone{min-width:0}
.cafe-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.cafe-res-lbl{font-size:13px;color:var(--ink3)}
.cafe-res-lbl strong{color:var(--ink);font-size:15px}
.cafe-sort-wrap{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3)}
.cafe-sort-sel{font-family:var(--font);font-size:13px;font-weight:500;padding:6px 10px;border:1px solid var(--bdr2);border-radius:var(--r);background:var(--bg);color:var(--ink);cursor:pointer;outline:none}
.cafe-tbl-wrap{border:1px solid var(--bdr);border-radius:var(--rl);box-shadow:var(--sh);overflow-x:auto;-webkit-overflow-scrolling:touch}.cafe-tbl-scroll{display:contents}
.cafe-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.cafe-tbl thead tr{background:var(--surf);border-bottom:2px solid var(--bdr)}
.cafe-tbl th{padding:9px 10px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink4);white-space:nowrap;user-select:none}
.cafe-tbl th.sort-on{color:var(--bluem)}.cafe-tbl th:last-child{width:100px;min-width:100px;padding-left:8px}.cafe-tbl td:last-child{width:100px;min-width:100px;padding:8px 8px 8px 6px}
.cafe-tbl th.sortable{cursor:pointer}
.cafe-tbl th.sortable:hover{color:var(--blue)}
.cafe-tbl td{padding:10px 10px;border-bottom:1px solid var(--surf2);vertical-align:middle}
.cafe-tbl tbody tr{transition:background .1s;cursor:pointer}
.cafe-tbl tbody tr:hover td{background:var(--surf)}
.cafe-tbl tbody tr:last-child td{border-bottom:none}
.cafe-tbl tbody tr.best-row td{background:var(--greenl)}
.cafe-tbl tbody tr.best-row td:first-child{border-left:3px solid var(--green);padding-left:10px}
.cafe-tbl tbody tr.best-row:hover td{background:#dcfce7}
/* Highlight recherche */
.cafe-tbl tbody tr.search-match td{background:#fefce8}
mark.cafe-hl{background:#fef08a;padding:0 1px;border-radius:2px;font-style:normal}

/* Cellules */
.cafe-prod-img{width:38px;height:38px;object-fit:contain;border:1px solid var(--bdr);border-radius:6px;background:var(--surf);display:block}
.cafe-prod-img-ph{width:38px;height:38px;background:var(--surf);border:1px solid var(--bdr);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.cafe-prod-img-ph .fmt-svg{width:20px;height:20px;margin:0}
.cafe-prod-name{font-weight:600;line-height:1.3}
.cafe-prod-brand{font-size:11px;color:var(--ink4);margin-top:2px}
.cafe-fmt-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;white-space:nowrap}
.cafe-fmt-badge .fmt-svg{width:13px;height:13px;margin:0}
.cafe-fmt-badge.capsule{background:var(--bluel);color:var(--blue)}
.cafe-fmt-badge.dosette{background:var(--greenl);color:var(--green)}
.cafe-fmt-badge.grain,.cafe-fmt-badge.moulu{background:var(--amberl);color:var(--amber)}
.cafe-fmt-badge.poudre{background:#fdf4ff;color:#7c3aed}
.torref-dot{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink2)}.cafe-tbl td:nth-child(7){max-width:130px}
.torref-dot::before{content:'';width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--ink4)}
.torref-dot.non-torrefie::before{background:#84cc16}
.torref-dot.torrefaction-legere::before{background:#d97706}
.torref-dot.torrefaction-moyenne::before{background:#b45309}
.torref-dot.torrefaction-moyenne-foncee::before{background:#7c2d12}
.torref-dot.torrefaction-foncee::before{background:#1c1007}
.cafe-prix{font-weight:700;font-size:14px}
.cafe-prix-old{font-size:11px;text-decoration:line-through;color:var(--ink4);display:block}
.cafe-prix-promo{font-size:11px;font-weight:700;color:var(--red)}
.cafe-ratio-wrap{display:flex;align-items:center;gap:7px}
.cafe-ratio-val{font-weight:800;font-size:14px;white-space:nowrap}
.cafe-ratio-val.best{color:var(--green)}
.cafe-ratio-bar{height:4px;border-radius:2px;background:var(--greenb);flex-shrink:0}
.cafe-best-tag{font-size:10px;font-weight:700;background:var(--green);color:#fff;padding:2px 7px;border-radius:4px;white-space:nowrap}
.cafe-btn-buy{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-size:12px;font-weight:700;padding:7px 14px;border-radius:var(--r);border:none;background:var(--bluem);color:#fff!important;text-decoration:none;white-space:nowrap;cursor:pointer;transition:all .12s;min-width:80px}
.cafe-btn-buy:hover{background:var(--blue);transform:translateY(-1px)}
.cafe-empty,.cafe-loading{text-align:center;padding:48px 24px;color:var(--ink4)}
.cafe-loading::before{content:'';display:block;width:28px;height:28px;border:3px solid var(--bdr);border-top-color:var(--bluem);border-radius:50%;animation:spin .6s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.cafe-tbl-footer{font-size:11px;color:var(--ink4);margin-top:10px;text-align:center}
.cafe-tbl-footer a{color:var(--ink4)}

/* ── GUIDE & FAQ ── */
.cafe-section{margin-top:56px;padding-top:40px;border-top:1px solid var(--bdr)}
.cafe-section-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--bluem);background:var(--bluel);padding:4px 12px;border-radius:20px;margin-bottom:12px}
.cafe-section-title{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.2px;margin-bottom:24px}
.cafe-guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cafe-guide-card{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rl);padding:20px;box-shadow:var(--sh);transition:box-shadow .15s,transform .15s}
.cafe-guide-card:hover{box-shadow:var(--shm);transform:translateY(-2px)}
.cafe-guide-ico{font-size:24px;margin-bottom:10px;display:block}
.cafe-guide-card h3{font-size:14px;font-weight:700;margin-bottom:7px}
.cafe-guide-card p{font-size:13px;color:var(--ink3);line-height:1.6}
.cafe-faq-list{max-width:680px}
.cafe-faq-item{border-bottom:1px solid var(--bdr)}
.cafe-faq-q{font-size:14px;font-weight:700;padding:16px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;user-select:none}
.cafe-faq-q::after{content:'+';font-size:20px;color:var(--ink4);transition:transform .2s;flex-shrink:0}
.cafe-faq-item.open .cafe-faq-q::after{transform:rotate(45deg)}
.cafe-faq-a{font-size:14px;color:var(--ink3);line-height:1.7;padding-bottom:16px;display:none}
.cafe-faq-item.open .cafe-faq-a{display:block}

/* ── MACHINES ── */
.cafe-machines-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.cafe-machine-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:box-shadow .15s,transform .15s}
.cafe-machine-card:hover{box-shadow:var(--shm);transform:translateY(-2px)}
.cafe-machine-img-wrap{height:140px;display:flex;align-items:center;justify-content:center;background:var(--surf);padding:12px}
.cafe-machine-img-wrap img{max-height:116px;max-width:100%;object-fit:contain}
.cafe-machine-img-ph{height:140px;display:flex;align-items:center;justify-content:center;background:var(--surf);font-size:40px}
.cafe-machine-info{padding:12px 14px;flex:1}
.cafe-machine-name{font-size:13px;font-weight:600;line-height:1.4;margin-bottom:4px}
.cafe-machine-brand{font-size:11px;color:var(--ink4);margin-bottom:4px}
.cafe-machine-compat{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--bluel);color:var(--blue)}
.cafe-machine-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surf);border-top:1px solid var(--bdr)}
.cafe-machine-prix{font-size:16px;font-weight:800;color:var(--ink)}
.cafe-machine-cta{font-size:11px;font-weight:700;color:var(--bluem)}
.cafe-machine-card:hover .cafe-machine-cta{text-decoration:underline}

/* ── ARTICLES SEO ── */
.cafe-articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cafe-art-card{display:flex;align-items:center;gap:14px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rl);padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:all .15s}
.cafe-art-card:hover{box-shadow:var(--shm);transform:translateY(-2px);border-color:var(--bdr2)}
.cafe-art-ico{font-size:24px;flex-shrink:0;width:40px;height:40px;background:var(--surf);border-radius:10px;display:flex;align-items:center;justify-content:center}
.cafe-art-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink4);display:block;margin-bottom:3px}
.cafe-art-title{font-size:13px;font-weight:600;color:var(--ink2);line-height:1.4}
.cafe-art-card:hover .cafe-art-title{color:var(--bluem)}
.cafe-art-arrow{font-size:16px;color:var(--ink4);margin-left:auto;flex-shrink:0;transition:transform .15s}
.cafe-art-card:hover .cafe-art-arrow{transform:translateX(3px);color:var(--bluem)}

/* ── FOOTER ── */
.cafe-footer{background:var(--coffee);color:rgba(255,255,255,.55);margin-top:72px}
.cafe-footer-in{max-width:1160px;margin:0 auto;padding:36px 24px 24px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
.cafe-footer-logo{font-family:var(--serif);font-size:20px;color:#fff;margin-bottom:10px}
.cafe-footer-desc{font-size:13px;line-height:1.6;max-width:280px}
.cafe-footer-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:12px}
.cafe-footer-col a{display:block;font-size:13px;color:rgba(255,255,255,.55);text-decoration:none;margin-bottom:8px;transition:color .12s}
.cafe-footer-col a:hover{color:#fff}
.cafe-footer-bottom{max-width:1160px;margin:0 auto;padding:12px 24px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px}
.cafe-footer-affil{max-width:500px;font-size:11px;color:rgba(255,255,255,.28)}

/* ── MODAL ── */
.cafe-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10000;align-items:center;justify-content:center;padding:20px}
.cafe-modal-bg.open{display:flex}
.cafe-modal-box{background:var(--bg);border-radius:var(--rxl);width:100%;max-width:580px;max-height:90vh;overflow-y:auto;padding:26px;position:relative;box-shadow:0 8px 40px rgba(0,0,0,.15)}
.cafe-modal-x{position:absolute;top:14px;right:14px;background:var(--surf);border:none;border-radius:50%;width:30px;height:30px;font-size:16px;cursor:pointer;color:var(--ink3);display:flex;align-items:center;justify-content:center;font-family:var(--font)}
.cafe-modal-grid{display:grid;grid-template-columns:110px 1fr;gap:18px}
.cafe-modal-img{width:110px;height:110px;object-fit:contain;border:1px solid var(--bdr);border-radius:var(--rl);background:var(--surf)}
.cafe-modal-img-ph{width:110px;height:110px;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.cafe-modal-img-ph .fmt-svg{width:40px;height:40px;margin:0}
.cafe-modal-name{font-size:16px;font-weight:800;margin-bottom:6px;line-height:1.3}
.cafe-modal-price{font-size:26px;font-weight:900;margin-bottom:3px}
.cafe-modal-ratio{font-size:14px;font-weight:700;color:var(--green);margin-bottom:14px}
.cafe-modal-specs{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;font-size:13px;margin-bottom:18px}
.cafe-modal-spec-l{color:var(--ink4)}
.cafe-modal-spec-v{font-weight:600}

/* ── FAB ── */
.cafe-fab{display:none;position:fixed;bottom:22px;right:22px;background:var(--coffee);color:#fff;border:none;border-radius:28px;padding:11px 20px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;z-index:99;box-shadow:0 4px 16px rgba(0,0,0,.3)}

/* ── RESPONSIVE ── */
@media(max-width:780px){
  .cafe-hero-in{grid-template-columns:1fr;padding:44px 20px}
  .cafe-hero-rank{display:none}
  .cafe-layout{grid-template-columns:1fr}
  .cafe-sidebar{display:none;position:fixed;inset:0;z-index:200;border-radius:0;overflow-y:auto;max-height:none;top:0}
  .cafe-sidebar.open{display:block}
  .cafe-fab{display:flex;align-items:center;gap:6px}
  .cafe-footer-in{grid-template-columns:1fr;gap:22px}
  .cafe-modal-grid{grid-template-columns:1fr}
  /* Tableau scrollable avec indicateur */
  .cafe-tbl-wrap{position:relative}
  .cafe-tbl-wrap::after{content:'← Faites défiler →';position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;color:#94a3b8;padding:4px;background:linear-gradient(transparent,var(--surf));pointer-events:none}
  .cafe-tbl th:nth-child(6),.cafe-tbl td:nth-child(6){min-width:80px}
  /* Colonne achat toujours visible sur mobile */
  .cafe-tbl th:last-child,.cafe-tbl td:last-child{position:sticky;right:0;background:var(--bg);box-shadow:-2px 0 6px rgba(0,0,0,.1);z-index:2}
  .cafe-comp-hd{flex-direction:column;align-items:flex-start}
  .cafe-search-wrap{margin-bottom:20px}
}
@media(max-width:480px){
  .cafe-h1{font-size:26px}
  .cafe-kpis{gap:16px}
  .cafe-kpi-v{font-size:20px}
  .cafe-main{padding:16px 14px 60px}
  .cafe-fmt-tab{padding:10px 12px;font-size:12px}
}