/* ═══════════════════════════════════════════════════════════════
   THÈME : BLEU TECH
   Hero bleu dégradé · Fond gris clair · Accents bleu marine
   Inspiré des meilleurs comparateurs (iGraal, LeGuide)
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url('../../fonts/plus-jakarta-sans-var.woff2') format('woff2-variations'), url('../../fonts/plus-jakarta-sans-var.woff2') format('woff2');
}

:root {
  --font:'Plus Jakarta Sans',-apple-system,sans-serif;
  --serif:'Plus Jakarta Sans','Georgia',sans-serif;
  --ink:#0f172a; --ink2:#1e293b; --ink3:#475569; --ink4:#94a3b8;
  --bg:#ffffff; --surf:#f1f5f9; --surf2:#e2e8f0;
  --bdr:#e2e8f0; --bdr2:#cbd5e1;
  --blue:#1e40af; --bluem:#2563eb; --bluel:#eff6ff; --blueb:#bfdbfe;
  --blue-hero-start:#0f2d6e; --blue-hero-end:#1d4ed8;
  --green:#15803d; --greenl:#f0fdf4; --greenb:#bbf7d0;
  --amber:#b45309; --amberl:#fffbeb;
  --red:#dc2626; --coffee:#0f2d6e; --crema:#bfdbfe;
  --r:8px; --rl:12px; --rxl:20px;
  --sh:0 1px 3px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.06);
  --shm:0 8px 24px rgba(15,23,42,.12);
}

/* ── PAGE BACKGROUND ── */
.cafe-wrap { background:var(--surf) }

/* ── HERO : dégradé bleu ── */
.cafe-hero {
  background:linear-gradient(135deg, var(--blue-hero-start) 0%, var(--blue-hero-end) 100%);
  position:relative; overflow:hidden;
}
.cafe-hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 100% at 100% -20%, rgba(96,165,250,.25), transparent),
    radial-gradient(ellipse 40% 60% at -10% 100%, rgba(30,64,175,.4), transparent);
  pointer-events:none;
}
.cafe-hero::after {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events:none;
}
.cafe-hero-in { padding:56px 24px 48px; grid-template-columns:1fr 380px; position:relative; z-index:1 }
.cafe-eyebrow { color:#93c5fd; opacity:1; font-weight:600 }
.cafe-eyebrow::before { background:#93c5fd }
.cafe-h1 { color:#fff; font-family:var(--font); font-size:clamp(26px,3.5vw,44px); font-weight:800; letter-spacing:-.03em; line-height:1.1 }
.cafe-h1 em { color:#93c5fd; font-style:normal }
.cafe-sub { color:rgba(255,255,255,.65) }

/* Barre de recherche hero */
.cafe-search-input {
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  backdrop-filter:blur(4px);
}
.cafe-search-input:focus {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.4);
  box-shadow:0 0 0 3px rgba(255,255,255,.1);
}
.cafe-search-input::placeholder { color:rgba(255,255,255,.4) }
.cafe-search-icon { color:rgba(255,255,255,.5) }

/* Stats hero */
.cafe-stats-bar { border-top:1px solid rgba(255,255,255,.12); padding-top:20px }
.cafe-stat-n { color:#fff; font-weight:800 }
.cafe-stat-l { color:rgba(255,255,255,.45) }
.cafe-stat-sep { background:rgba(255,255,255,.15) }

/* Top 5 sidebar */
.cafe-top5 {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--rl);
  backdrop-filter:blur(8px);
}
.cafe-top5-hd { background:rgba(0,0,0,.15); border-bottom:1px solid rgba(255,255,255,.1); padding:14px 18px }
.cafe-top5-hd h3 { color:#fff; font-size:13px; font-weight:600 }
.cafe-top5-item { border-bottom:1px solid rgba(255,255,255,.08) }
.cafe-top5-item:hover { background:rgba(255,255,255,.08) }
.cafe-rank-num { color:rgba(255,255,255,.35); font-weight:700 }
.cafe-rank-name { color:#fff; font-weight:500 }
.cafe-rank-sub { color:rgba(255,255,255,.45) }
.cafe-rank-prix { color:#93c5fd; font-weight:700 }
.cafe-top5-footer { background:rgba(0,0,0,.1); color:rgba(255,255,255,.4); border-top:1px solid rgba(255,255,255,.08) }

/* ── DEAL DU MOMENT ── */
.cafe-deal-bar {
  background:#fff;
  border-bottom:1px solid var(--bdr);
  box-shadow:0 2px 8px rgba(15,23,42,.06);
  position:sticky; top:0; z-index:100;
}
.cafe-deal-fire { animation:none }
.cafe-deal-label { color:var(--ink4); font-weight:600; text-transform:uppercase; font-size:10px; letter-spacing:.08em }
.cafe-deal-name { color:var(--ink); font-weight:600 }
.cafe-deal-ratio { color:var(--blue); font-size:20px; font-weight:800 }
.cafe-deal-unit { color:var(--ink4) }
.cafe-deal-pct { background:var(--greenl); color:var(--green); border:1px solid var(--greenb); font-weight:700 }
.cafe-deal-promos-btn { background:var(--surf); color:var(--ink3); border:1px solid var(--bdr) }
.cafe-deal-promos-btn:hover, .cafe-deal-promos-btn.active { background:var(--bluel); border-color:var(--blueb); color:var(--blue) }
.cafe-deal-cta { background:var(--blue); color:#fff; font-weight:700; border-radius:var(--r) }
.cafe-deal-cta:hover { background:var(--bluem) }

/* ── ONGLETS FORMAT ── */
.cafe-fmts-bar { background:#fff; border-bottom:1px solid var(--bdr); box-shadow:0 1px 4px rgba(15,23,42,.04) }
.cafe-fmt-tab { color:var(--ink4); border-bottom:2px solid transparent; font-weight:500 }
.cafe-fmt-tab:hover { color:var(--ink2); background:var(--surf) }
.cafe-fmt-tab.active { color:var(--blue); border-bottom-color:var(--blue); background:transparent; font-weight:700 }
.cafe-fmt-count { background:var(--surf2); color:var(--ink4); font-weight:600 }
.cafe-fmt-tab.active .cafe-fmt-count { background:var(--bluel); color:var(--blue) }

/* ── CORPS ── */
.cafe-layout { background:var(--surf) }
.cafe-header-bar { background:#fff; border:1px solid var(--bdr); border-radius:var(--rl); margin-bottom:12px; box-shadow:var(--sh) }
.cafe-count-badge { background:var(--surf2); color:var(--ink3); border:1px solid var(--bdr); font-weight:600 }
.cafe-best-badge { background:var(--bluel); color:var(--blue); border:1px solid var(--blueb); font-weight:700 }
.cafe-maj { color:var(--ink4) }

/* Sidebar filtres */
.cafe-sidebar { background:#fff; border:1px solid var(--bdr); border-radius:var(--rl); box-shadow:var(--sh) }
.cafe-filters { background:transparent }
.cafe-fg-lbl { color:var(--blue); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em }
.cafe-chip { background:var(--surf); color:var(--ink3); border:1px solid var(--bdr); border-radius:var(--r); font-weight:500 }
.cafe-chip:hover { border-color:var(--bdr2); color:var(--ink); background:var(--surf2) }
.cafe-chip.on { background:var(--blue); color:#fff; border-color:var(--blue) }
.cafe-clear-all { color:var(--blue); font-weight:600 }
input[type=range] { accent-color:var(--blue) }

/* ── TABLEAU ── */
.cafe-table-wrap { background:#fff; border:1px solid var(--bdr); border-radius:var(--rl); box-shadow:var(--sh); overflow:hidden }
#cafe-thead th {
  background:var(--surf);
  color:var(--ink4);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:2px solid var(--bdr);
}
#cafe-thead th.sort-active { color:var(--blue) }
#cafe-tbody tr { border-bottom:1px solid var(--surf) }
#cafe-tbody tr:hover td { background:var(--bluel) }
#cafe-tbody tr.best-row td { background:var(--bluel) }
#cafe-tbody tr.best-row td:first-child { border-left:3px solid var(--blue); padding-left:13px }
#cafe-tbody tr.cafe-row-promo { background:linear-gradient(90deg,#fffbeb,transparent 70%) }
.cafe-prod-name { color:var(--ink); font-weight:600 }
.cafe-prod-brand { color:var(--ink4) }
.cafe-fmt-badge { font-size:11px; font-weight:600; border-radius:var(--r) }
.cafe-fmt-badge.capsule { background:var(--bluel); color:var(--blue) }
.cafe-fmt-badge.dosette { background:#fef9c3; color:#854d0e }
.cafe-fmt-badge.grain   { background:var(--greenl); color:var(--green) }
.cafe-fmt-badge.moulu   { background:#fdf4ff; color:#7c3aed }
.cafe-fmt-badge.poudre  { background:#fff7ed; color:#c2410c }
.cafe-prix { color:var(--ink); font-weight:700 }
.cafe-ratio-val { color:var(--blue); font-weight:800; font-size:15px }
.cafe-ratio-val.best { color:var(--green) }
.cafe-ratio-bar { background:var(--bluel); border:1px solid var(--blueb); height:5px; border-radius:3px; display:inline-block; vertical-align:middle }
.cafe-best-tag { background:var(--blue); color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px }
.cafe-btn-buy {
  background:var(--blue);
  color:#fff;
  border:none;
  font-weight:700;
  border-radius:var(--r);
  font-size:12px;
  letter-spacing:.01em;
}
.cafe-btn-buy:hover { background:var(--bluem); transform:translateY(-1px); box-shadow:0 4px 12px rgba(37,99,235,.3) }
.cafe-prod-img-ph { background:var(--surf2); color:var(--ink4); border-radius:var(--r) }

/* ── MODAL ── */
.cafe-modal-box { border-radius:var(--rxl); border:1px solid var(--bdr); box-shadow:var(--shm) }
.cafe-modal-x { color:var(--ink4); background:var(--surf); border-radius:50% }
.cafe-modal-x:hover { background:var(--surf2); color:var(--ink) }
.cafe-modal-prod-hd { background:var(--surf); border-bottom:1px solid var(--bdr); border-radius:var(--rxl) var(--rxl) 0 0 }
.cafe-modal-prod-img { background:var(--surf2); border-radius:var(--r) }
.cafe-modal-title { color:var(--ink); font-weight:700 }
.cafe-modal-brand { color:var(--ink4) }
.cafe-modal-fmt-badge { background:var(--bluel); color:var(--blue); font-weight:600 }
.cafe-modal-ratio-big { color:var(--blue); font-weight:800 }
.cafe-modal-prix-wrap .cafe-prix { color:var(--ink); font-weight:700 }
.cafe-modal-section-title { color:var(--blue); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em }
.cafe-modal-attr-val { color:var(--ink); font-weight:500 }
.cafe-modal-cta { background:var(--blue); color:#fff; font-weight:700; border-radius:var(--r) }
.cafe-modal-cta:hover { background:var(--bluem); box-shadow:0 4px 12px rgba(37,99,235,.3) }
.cafe-modal-bg { background:rgba(15,23,42,.6) }

/* ── SECTIONS ── */
.cafe-section { background:#fff; border-radius:var(--rl); border:1px solid var(--bdr); padding:32px; margin-top:24px; box-shadow:var(--sh) }
.cafe-section-tag { background:var(--bluel); color:var(--blue); border-radius:20px; padding:4px 14px; font-size:11px; font-weight:700; display:inline-block; margin-bottom:12px }
.cafe-section-title { color:var(--ink); font-weight:800; letter-spacing:-.02em }
.cafe-guide-card { background:var(--surf); border:1px solid var(--bdr); border-radius:var(--rl) }
.cafe-guide-ico { color:var(--blue) }
.cafe-faq-item { border-bottom:1px solid var(--bdr) }
.cafe-faq-q { color:var(--ink); font-weight:600 }
.cafe-faq-a { color:var(--ink3) }

/* ── ARTICLES GRID ── */
.cafe-art-card { border:1px solid var(--bdr); border-radius:var(--rl); box-shadow:var(--sh) }
.cafe-art-card:hover { box-shadow:var(--shm); border-color:var(--blueb) }
.cafe-art-badge { background:var(--bluel); color:var(--blue) }
.cafe-art-more { color:var(--blue) }

/* ── FOOTER ── */
.cafe-footer { background:var(--blue-hero-start); color:rgba(255,255,255,.5) }
.cafe-footer-logo { color:#fff; font-weight:800 }
.cafe-footer a { color:rgba(255,255,255,.4) }
.cafe-footer a:hover { color:#fff }