/* =========================================================
   HomeEspressoLab — Discord-ish Editorial CSS (UPDATED)
   Goals: clean, fast, accessible, mega-menu fixed
   + SVG icon fix + homepage hero banner fixes
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* Fonts */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Type scale */
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 2.75rem;    /* 44px */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  /* Layout */
  --container: 1120px;
  --gutter: 16px;
  --headerH: 72px;

  /* Spacing scale */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* Radius */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 28px;

  /* Core palette (Discord-ish, unique) */
  --bg: #0b0d14;          /* deep near-black */
  --bg2:#0f1320;          /* slightly lifted */
  --panel:#111728;        /* surface */
  --panel2:#0e1424;       /* alt surface */
  --panel3:#151d31;       /* hover/lift */
  --text:#e9ecf4;         /* off-white */
  --muted:#aab2c5;        /* muted text */
  --muted2:#7b849a;       /* deeper muted */
  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.06);

  /* Accent (violet) */
  --violet:#8b5cf6;       /* primary */
  --violet2:#a78bfa;      /* light */
  --violet3:#6d28d9;      /* deep */
  --fuchsia:#c084fc;      /* secondary pop */
  --accent: var(--violet);

  /* Gradients */
  --grad-accent: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 38%, #c084fc 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(124,58,237,.22) 0%, rgba(139,92,246,.18) 35%, rgba(192,132,252,.16) 100%);
  --grad-sheen: radial-gradient(1200px 500px at 20% -10%, rgba(139,92,246,.22), transparent 60%),
                radial-gradient(900px 420px at 90% 0%, rgba(192,132,252,.16), transparent 55%);

  /* Semantic */
  --success:#22c55e;
  --warn:#fbbf24;
  --danger:#ef4444;
  --info:#60a5fa;

  /* Shadows (subtle, fast) */
  --shadow1: 0 10px 26px rgba(0,0,0,.28);
  --shadow2: 0 8px 18px rgba(0,0,0,.22);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(167,139,250,.35);

  /* Motion */
  --ease: cubic-bezier(.2,.9,.2,1);
  --t1: 140ms;
  --t2: 220ms;

  /* Editorial images */
  --imgRadius: 18px;

  /* Tables */
  --tableHead: rgba(255,255,255,.05);
  --tableZebra: rgba(255,255,255,.03);
}

/* Light mode support (optional): if OS requests light */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fb;
    --bg2:#ffffff;
    --panel:#ffffff;
    --panel2:#f3f4f6;
    --panel3:#eef2ff;
    --text:#0b1220;
    --muted:#4b5563;
    --muted2:#6b7280;
    --line: rgba(2,6,23,.12);
    --line2: rgba(2,6,23,.08);
    --shadow1: 0 10px 26px rgba(2,6,23,.10);
    --shadow2: 0 8px 18px rgba(2,6,23,.08);
    --tableHead: rgba(2,6,23,.05);
    --tableZebra: rgba(2,6,23,.03);
  }
}

/* ---------- Base / Reset ---------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  color-scheme: dark light;
  text-rendering: optimizeLegibility;
}

body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  background-image: var(--grad-sheen);
  overflow-x: hidden;
}

/* Improve anchor jump with sticky header */
:target{ scroll-margin-top: calc(var(--headerH) + 18px); }

img, video{
  max-width: 100%;
  height: auto;
  display: block;
}

/* SVG: ok en block sauf les petites icônes inline */
svg:not(.icon){
  max-width: 100%;
  height: auto;
  display: block;
}

a{
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover{ text-decoration: underline; }

p{ margin: 0 0 var(--s-5); }
h1,h2,h3,h4{ margin: 0 0 var(--s-4); line-height: var(--lh-tight); }
h1{ font-size: clamp(2rem, 3.6vw, var(--text-4xl)); letter-spacing: -0.02em; }
h2{ font-size: clamp(1.5rem, 2.4vw, var(--text-3xl)); letter-spacing: -0.01em; }
h3{ font-size: clamp(1.25rem, 1.8vw, var(--text-2xl)); }
h4{ font-size: clamp(1.1rem, 1.35vw, var(--text-xl)); }

small, .small{ font-size: var(--text-sm); color: var(--muted); }
code, pre{
  font-family: var(--font-mono);
  font-size: 0.95em;
}
pre{
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line2);
  overflow:auto;
}
code{
  background: rgba(255,255,255,.06);
  padding: 0.15em 0.35em;
  border-radius: 8px;
  border: 1px solid var(--line2);
}

hr{
  border: 0;
  height: 1px;
  background: var(--line2);
  margin: var(--s-7) 0;
}

ul, ol{ padding-left: 1.2em; margin: 0 0 var(--s-5); }
li{ margin: 0.35em 0; color: var(--text); }
blockquote{
  margin: var(--s-6) 0;
  padding: var(--s-5);
  border-left: 4px solid rgba(167,139,250,.55);
  background: rgba(139,92,246,.10);
  border-radius: var(--r-md);
}

/* ---------- Accessibility ---------- */
:focus{ outline: none; }
:focus-visible{
  box-shadow: var(--ring);
  border-radius: 10px;
}
.skip-link{
  position: absolute;
  left: 12px;
  top: -200px;
  padding: 10px 12px;
  z-index: 9999;
  border-radius: 12px;
  color: var(--text);
  background: rgba(17,23,40,.95);
  border: 1px solid var(--line);
  transition: top var(--t2) var(--ease);
}
.skip-link:focus{ top: 12px; }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Layout Helpers ---------- */
.container{
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.section{ padding: var(--s-9) 0; }
.section--tight{ padding: var(--s-7) 0; }

.stack > * + *{ margin-top: var(--s-4); }
.stack--sm > * + *{ margin-top: var(--s-3); }
.stack--lg > * + *{ margin-top: var(--s-6); }

.cluster{
  display:flex;
  flex-wrap:wrap;
  gap: var(--s-3);
  align-items:center;
}
.cluster--between{ justify-content: space-between; }

.grid{
  display:grid;
  gap: var(--s-5);
}
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
@media (min-width: 860px){
  .grid-2{ grid-template-columns: 1.2fr .8fr; }
  .grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.muted{ color: var(--muted); }
.muted2{ color: var(--muted2); }
.kicker{
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.hide-on-mobile{ display:none; }
.hide-on-desktop{ display:block; }
@media (min-width: 860px){
  .hide-on-mobile{ display:block; }
  .hide-on-desktop{ display:none; }
}

/* ---------- Surfaces ---------- */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%), var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow2);
}
.panel2{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%), var(--panel2);
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%), var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow2);
  transition: transform var(--t2) var(--ease), border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(167,139,250,.30);
  background: linear-gradient(180deg, rgba(167,139,250,.10), transparent 55%), var(--panel3);
}
.card--best{
  border-color: rgba(167,139,250,.35);
  background:
    linear-gradient(180deg, rgba(167,139,250,.14), transparent 60%),
    var(--panel);
  position: relative;
  overflow:hidden;
}
.card--best::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: var(--grad-accent-soft);
  filter: saturate(1.1);
  pointer-events:none;
  opacity:.9;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 2px;
  border-radius: calc(var(--r-lg) + 2px);
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 300; /* raised for dropdown safety */
  height: var(--headerH);
  display:flex;
  align-items:center;
  backdrop-filter: saturate(1.2) blur(10px);
  background: rgba(11,13,20,.70);
  border-bottom: 1px solid var(--line2);
}
@media (prefers-color-scheme: light){
  .site-header{ background: rgba(247,248,251,.82); }
}
.navbar{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--s-4);
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
  min-width: max-content;
}

/* If you use an <img class="brand__img"> in the header (your current HTML) */
.brand__img{
  width: 28px;
  height: 28px;
  display:block;
  background: transparent !important; /* removes the purple square */
  box-shadow: none !important;        /* removes glow */
  border-radius: 0 !important;        /* set to 12px if you want rounded corners */
}

/* If you ever use a <span class="brand__logo"> badge version */
.brand__logo{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: transparent !important; /* removes the purple square */
  box-shadow: none !important;        /* removes glow */
}

.brand__name{ font-size: 1.05rem; }

/* Nav links */
.nav{
  display:flex;
  align-items:center;
  gap: var(--s-2);
}
.nav a,
.nav button{
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
}

.nav a,
.nav .nav__link,
.nav button.nav__link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background var(--t1) var(--ease), border-color var(--t1) var(--ease), color var(--t1) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover,
.nav .nav__link:hover{
  background: rgba(255,255,255,.04);
  border-color: var(--line2);
  color: var(--text);
  text-decoration: none;
}
.nav a[aria-current="page"],
.nav .nav__link[aria-current="page"]{
  background: rgba(139,92,246,.10);
  border-color: rgba(167,139,250,.28);
  color: var(--text);
}

/* Mobile nav wrapper helper */
.navbar__right{
  display:flex;
  align-items:center;
  gap: var(--s-3);
}

/* ---------- Mega menu / Dropdown FIX (important) ---------- */
/* Supports multiple class names to match your HTML */
.nav-item,
.nav__item{ position: relative; }

.has-dropdown,
.has-mega,
.is-dropdown,
.is-mega{ position: relative; }

/* The overlay backdrop (optional if you use it in HTML) */
.menu-backdrop,
.nav-backdrop,
.mega-backdrop{
  position: fixed;
  inset: var(--headerH) 0 0 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 250;
}

/* The actual dropdown panel */
.dropdown,
.dropdown-menu,
.dropdown__menu,
.nav__dropdown,
.mega,
.mega-menu,
.mega__menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 24px));
  max-height: calc(100vh - var(--headerH) - 24px);
  overflow: auto;

  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%),
    rgba(17,23,40,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  z-index: 350;

  padding: 14px;
}

/* If your dropdown is full-width by accident, this prevents it */
.dropdown[style*="width: 100%"],
.mega[style*="width: 100%"],
.mega-menu[style*="width: 100%"]{
  width: min(980px, calc(100vw - 24px)) !important;
}

/* Inner layout: grid columns */
.dropdown__grid,
.mega__grid,
.mega-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px){
  .dropdown__grid,
  .mega__grid,
  .mega-grid{
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
  }
}

/* Column cards inside menu */
.dropdown__col,
.mega__col,
.menu__col{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 12px;
}

/* Links inside mega menu */
.dropdown a,
.dropdown-menu a,
.nav__dropdown a,
.mega a,
.mega-menu a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--muted);
  border: 1px solid transparent;
  text-decoration: none;
}
.dropdown a:hover,
.dropdown-menu a:hover,
.nav__dropdown a:hover,
.mega a:hover,
.mega-menu a:hover{
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

/* Small label above sections (like "Capsule picks") */
.menu-label,
.dropdown__label,
.mega__label{
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 6px 6px 10px;
}

/* Close spacing for dropdown on small screens */
@media (max-width: 520px){
  .dropdown,
  .dropdown-menu,
  .nav__dropdown,
  .mega,
  .mega-menu{
    padding: 12px;
    border-radius: 16px;
  }
}

/* Prevent header overlap bug */
.site-header *{
  scroll-margin-top: calc(var(--headerH) + 18px);
}

/* Optional: keep body scroll when dropdown open (if you add .menu-open on body) */
body.menu-open{
  overflow: hidden;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  font-size: var(--text-sm);
  color: var(--muted);
}
.breadcrumbs a{ color: var(--muted); }
.breadcrumbs a:hover{ color: var(--text); }
.breadcrumbs .sep{ opacity: .55; }

/* ---------- Hero ---------- */
.hero{ padding: var(--s-9) 0 var(--s-7); }
.hero__wrap{
  display:grid;
  gap: var(--s-6);
  align-items: start;
}
@media (min-width: 860px){
  .hero__wrap{
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
  }
}
.hero__title{ margin-bottom: var(--s-3); }
.hero__lead{
  color: var(--muted);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  max-width: 62ch;
}
.hero__panel{
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(167,139,250,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%),
    rgba(17,23,40,.65);
  box-shadow: var(--shadow1);
}
.hero__panel h3{ margin-bottom: var(--s-2); }
.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* ---------- Pills / Badges ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
  font-size: var(--text-sm);
  color: var(--muted);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  letter-spacing: .02em;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
.badge--best{
  border-color: rgba(167,139,250,.32);
  background: rgba(139,92,246,.12);
  color: var(--text);
}
.badge--warn{
  border-color: rgba(251,191,36,.28);
  background: rgba(251,191,36,.10);
  color: var(--text);
}
.badge--ok{
  border-color: rgba(34,197,94,.24);
  background: rgba(34,197,94,.10);
  color: var(--text);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 650;
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: transform var(--t1) var(--ease), box-shadow var(--t1) var(--ease), background var(--t1) var(--ease), border-color var(--t1) var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  color: #0b0d14;
  background: var(--grad-accent);
  box-shadow: 0 12px 24px rgba(139,92,246,.22);
}
.btn--primary:hover{
  box-shadow: 0 14px 26px rgba(139,92,246,.28);
  text-decoration: none;
}
.btn--secondary{
  color: var(--text);
  border-color: rgba(167,139,250,.24);
  background: rgba(139,92,246,.12);
}
.btn--secondary:hover{
  background: rgba(139,92,246,.18);
  border-color: rgba(167,139,250,.34);
  text-decoration: none;
}
.btn--ghost{
  color: var(--text);
  border-color: var(--line2);
  background: rgba(255,255,255,.03);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(167,139,250,.22);
  text-decoration: none;
}
.btn--link{
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--violet2);
  font-weight: 650;
}
.btn--link:hover{ text-decoration: underline; }
.btn[disabled],
.btn.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none !important;
}
.btn--sm{ padding: 10px 12px; border-radius: 12px; }
.btn--lg{ padding: 14px 16px; border-radius: 16px; font-size: var(--text-base); }

/* CTA block */
.cta{
  display:flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(167,139,250,.26);
  background: linear-gradient(180deg, rgba(167,139,250,.12), transparent 65%), var(--panel);
}
@media (min-width: 720px){
  .cta{ flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- Forms ---------- */
.form{ display:grid; gap: var(--s-4); }
.label{
  display:block;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 8px;
}
.input, textarea, select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline: none;
  transition: border-color var(--t1) var(--ease), background var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
textarea{ min-height: 120px; resize: vertical; }
.input:focus, textarea:focus, select:focus{
  border-color: rgba(167,139,250,.38);
  box-shadow: var(--ring);
  background: rgba(255,255,255,.04);
}
.help{ font-size: var(--text-sm); color: var(--muted2); }

/* ---------- Images ---------- */
.figure{
  border-radius: var(--imgRadius);
  overflow:hidden;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.02);
}
.figure img{ width:100%; height:auto; }
.img--rounded{ border-radius: var(--imgRadius); }
.img--shadow{ box-shadow: var(--shadow2); }
.ar-16x9{ aspect-ratio: 16/9; object-fit: cover; }
.ar-4x3{ aspect-ratio: 4/3; object-fit: cover; }
.ar-1x1{ aspect-ratio: 1/1; object-fit: cover; }

/* ---------- Content Blocks ---------- */
.notice{
  padding: var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
}
.notice--tip{
  border-color: rgba(167,139,250,.26);
  background: rgba(139,92,246,.10);
}
.notice--warn{
  border-color: rgba(251,191,36,.24);
  background: rgba(251,191,36,.10);
}
.notice--danger{
  border-color: rgba(239,68,68,.22);
  background: rgba(239,68,68,.08);
}
.notice--info{
  border-color: rgba(96,165,250,.22);
  background: rgba(96,165,250,.08);
}

.disclosure{
  font-size: var(--text-sm);
  color: var(--muted);
  border: 1px dashed rgba(167,139,250,.28);
  background: rgba(139,92,246,.08);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

/* Pros / Cons */
.procon{ display:grid; gap: var(--s-4); }
@media (min-width: 860px){
  .procon{ grid-template-columns: 1fr 1fr; }
}
.pros, .cons{
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
}
.pros{ border-color: rgba(34,197,94,.20); }
.cons{ border-color: rgba(239,68,68,.18); }
.pros h3, .cons h3{ margin-bottom: var(--s-3); }

/* ---------- TOC ---------- */
.toc{
  position: sticky;
  top: calc(var(--headerH) + 16px);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
}
.toc__title{
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--s-3);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.toc a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
}
.toc a:hover{
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-color: var(--line2);
}
.toc a.is-active{
  color: var(--text);
  background: rgba(139,92,246,.12);
  border-color: rgba(167,139,250,.26);
}

/* ---------- Tables (comparison) ---------- */
.table-wrap{
  overflow:auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.02);
}
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
}
th, td{
  padding: 14px 14px;
  border-bottom: 1px solid var(--line2);
  vertical-align: top;
}
thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color: var(--text);
  font-size: var(--text-sm);
  letter-spacing: .02em;
  border-bottom: 1px solid var(--line);
}
tbody tr:nth-child(even) td{ background: var(--tableZebra); }
tbody tr:hover td{ background: rgba(139,92,246,.06); }

.table__product{
  display:flex;
  gap: 12px;
  align-items:center;
}
.table__thumb{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
  flex: 0 0 auto;
}
.table__name{ font-weight: 700; }
.table__note{ font-size: var(--text-sm); color: var(--muted); margin-top: 2px; }

.row--best td{
  background: rgba(139,92,246,.10) !important;
  border-bottom-color: rgba(167,139,250,.22);
}
.row--best .table__name{ color: var(--text); }

/* Mobile alternative: table to cards (helper) */
.table-cards{ display:grid; gap: var(--s-5); }
@media (min-width: 860px){
  .table-cards{ display:none; }
}
.table-cards .card{ padding: var(--s-5); }

/* ---------- Ratings ---------- */
.rating{
  display:inline-flex;
  gap: 4px;
  align-items:center;
}
.star{
  width: 16px;
  height: 16px;
  display:inline-block;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 60%), rgba(255,255,255,.08);
  border: 1px solid var(--line2);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  border-radius: 4px;
}
.star.is-on{
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 60%), rgba(167,139,250,.45);
  border-color: rgba(167,139,250,.35);
}
.rating__value{
  font-size: var(--text-sm);
  color: var(--muted);
  margin-left: 6px;
}

/* ---------- Review Product Box ---------- */
.product-box{
  display:grid;
  gap: var(--s-5);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(167,139,250,.22);
  background: linear-gradient(180deg, rgba(167,139,250,.10), transparent 65%), var(--panel);
}
@media (min-width: 860px){
  .product-box{ grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}
.product-box__media{
  border-radius: var(--r-lg);
  overflow:hidden;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.02);
}
.product-box__title{ margin-bottom: var(--s-2); }
.product-box__meta{
  display:flex;
  flex-wrap:wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0;
}

/* ---------- FAQ (accordion-friendly) ---------- */
.faq{ display:grid; gap: var(--s-3); }
.faq details{
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.faq summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"";
  width: 12px; height: 12px;
  border-right: 2px solid rgba(167,139,250,.75);
  border-bottom: 2px solid rgba(167,139,250,.75);
  transform: rotate(45deg);
  transition: transform var(--t2) var(--ease);
  margin-left: 10px;
  flex: 0 0 auto;
}
.faq details[open] summary::after{ transform: rotate(-135deg); }
.faq .answer{
  padding: 0 16px 16px;
  color: var(--muted);
}

/* ---------- Pagination ---------- */
.pagination{
  display:flex;
  flex-wrap:wrap;
  gap: var(--s-2);
  align-items:center;
}
.page{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  text-decoration:none;
}
.page:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: rgba(167,139,250,.24);
}
.page[aria-current="page"]{
  color: #0b0d14;
  background: var(--grad-accent);
  border-color: transparent;
}

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--line2);
  padding: var(--s-8) 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.02));
}
.footer__grid{
  display:grid;
  gap: var(--s-6);
}
@media (min-width: 860px){
  .footer__grid{
    grid-template-columns: 1.2fr .8fr;
    align-items:start;
  }
}
.footer__links{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--s-3);
}
.footer__links a{
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.footer__links a:hover{
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-color: var(--line2);
  text-decoration:none;
}
.copyright{
  margin-top: var(--s-6);
  color: var(--muted2);
  font-size: var(--text-sm);
}

/* ---------- Utilities ---------- */
.align-center{ text-align:center; }
.max-65ch{ max-width: 65ch; }
.inline{ display:inline; }
.center{ margin-inline:auto; }
.w-100{ width:100%; }
.mt-0{ margin-top:0; }
.mt-2{ margin-top: var(--s-2); }
.mt-4{ margin-top: var(--s-4); }
.mt-6{ margin-top: var(--s-6); }
.mb-0{ margin-bottom:0; }
.mb-2{ margin-bottom: var(--s-2); }
.mb-4{ margin-bottom: var(--s-4); }
.mb-6{ margin-bottom: var(--s-6); }
.p-4{ padding: var(--s-4); }
.p-6{ padding: var(--s-6); }

/* ---------- Section Headings (accent) ---------- */
.h-accent{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--grad-accent-soft);
  border: 1px solid rgba(167,139,250,.22);
}

/* ---------- Link accents ---------- */
.link-accent{
  color: var(--violet2);
  text-decoration: underline;
  text-decoration-color: rgba(167,139,250,.45);
}
.link-accent:hover{
  color: var(--text);
  text-decoration-color: rgba(167,139,250,.75);
}

/* ---------- Print ---------- */
@media print{
  body{ background:#fff; color:#111; }
  .site-header, .site-footer, .btn, .toc,
  .dropdown, .dropdown-menu, .nav__dropdown, .mega, .mega-menu,
  .menu-backdrop, .nav-backdrop, .mega-backdrop{ display:none !important; }
  .card, .panel, .panel2, .product-box{ box-shadow:none; border-color:#ddd; background:#fff; }
  a{ text-decoration: underline; color:#111; }
}

/* ---------- Consent banner ---------- */
.consent{
  position:fixed;
  inset:auto 0 0 0;
  padding:16px;
  z-index:9999;
}
.consent__card{
  max-width:980px;
  margin:0 auto;
  background: rgba(17,23,40,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.consent__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:12px;
}
.consent__custom{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
}
.consent__toggle{
  display:flex;
  gap:10px;
  align-items:center;
}

/* =========================================================
   Mobile Menu (Drawer) — HomeEspressoLab
   ========================================================= */

/* Desktop defaults */
.nav--desktop,
.lang-switch--desktop{ display: flex; }

.menu-btn{ display: none; }

/* Mobile layout */
@media (max-width: 980px){
  .nav--desktop,
  .lang-switch--desktop{ display: none; }

  .menu-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: inherit;
    cursor: pointer;
  }
  .menu-btn:active{ transform: translateY(1px); }

  .menu-btn__icon{
    width: 18px;
    height: 12px;
    position: relative;
    display: inline-block;
  }
  .menu-btn__icon::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:2px;
    background: currentColor;
    border-radius: 2px;
    opacity: .9;
    box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
  }
  .menu-btn__text{
    font-weight: 650;
    font-size: var(--text-sm);
  }
}

/* Backdrop */
.mobile-nav{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}

/* Panel */
.mobile-nav__panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: rgba(10, 12, 20, .98);
  border-left: 1px solid rgba(255,255,255,.10);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-nav__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-nav__links{
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.mobile-nav__links a{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  text-decoration: none;
  color: rgba(255,255,255,.94) !important;
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.mobile-nav__links a:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(167,139,250,.22);
  text-decoration: none;
}
.mobile-nav__links a:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

.mobile-nav__links a[aria-current="page"]{
  color: #ffffff !important;
  background: rgba(139, 92, 246, .18) !important;
  border-color: rgba(139, 92, 246, .55) !important;
}

.mobile-nav__lang{
  margin-top: auto;
  display:flex;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mobile-nav__top,
.mobile-nav__top *{
  color: rgba(255,255,255,.92);
}

/* ---------- Video (YouTube embed) ---------- */
.video-wrap{
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow2);
}
.video-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================================================
   Detailed picks cards — better CTA placement
   ========================================================= */

.card--detail{
  display:flex;
  flex-direction:column;
}

.card--detail .card__footer{
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line2);

  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: var(--s-3);
  flex-wrap:wrap;
}
.card--detail .card__footer .btn{
  width: auto;
  min-width: 240px;
}
@media (max-width: 640px){
  .card--detail .card__footer{
    justify-content: stretch;
  }
  .card--detail .card__footer .btn{
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   HERO Banner Override (FULL WIDTH) — UPDATED (no overlap)
   ========================================================= */

.hero.hero--banner{
  padding: 0;
  margin-top: var(--s-7);
}

/* Cancel the "card" look for banner */
.hero.hero--banner .hero__wrap{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  position: relative;
  overflow: hidden;
}

/* Full-width image */
.hero.hero--banner .hero__media{
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  position: relative;
}

.hero.hero--banner .hero__media img{
  width: 100%;
  height: clamp(320px, 46vw, 520px);
  object-fit: cover;
}

/* Dark overlay + violet glow */
.hero.hero--banner .hero__media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 55%, rgba(124,58,237,.28), transparent 60%),
    linear-gradient(90deg, rgba(8,10,16,.88) 0%, rgba(8,10,16,.58) 46%, rgba(8,10,16,0) 78%);
  pointer-events:none;
  z-index: 1;
}

/* Overlay content (ONLY over image height) */
.hero.hero--banner .hero__content{
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(320px, 46vw, 520px);
  z-index: 2;
  display: grid;
  align-content: center;

  padding: clamp(18px, 4vw, 52px);
  max-width: var(--container);
  margin-inline: auto;
}

/* Bottom bar: no overlap */
.hero.hero--banner .hero__bar{
  position: relative;
  z-index: 3;
  margin-top: 0;
  padding: var(--s-5) var(--gutter) var(--s-7);
  max-width: var(--container);
  margin-inline: auto;

  display: grid;
  gap: var(--s-5);
}
@media (min-width: 860px){
  .hero.hero--banner .hero__bar{
    grid-template-columns: 1fr 360px;
    align-items: start;
  }
}

/* Mobile: content under image */
@media (max-width: 720px){
  .hero.hero--banner .hero__content{
    position: static;
    height: auto;
    padding: var(--s-5) var(--gutter) 0;
  }
  .hero.hero--banner .hero__bar{
    padding-top: var(--s-4);
  }
}

/* Buttons + note spacing (banner or regular hero) */
.hero__actions{
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(15, 19, 32, .78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-xl);
}
.hero__actions .cluster{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin: 0;
}
.hero__tip{
  margin: 22px 0 0;
  padding: 12px 0 0;
  max-width: 62ch;

  font-size: var(--text-sm);
  line-height: 1.45;
  color: rgba(235, 238, 255, .74);

  background: none;
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
}
.hero__tip::before{
  content: "•";
  color: var(--violet2);
  margin-right: 8px;
}
@media (max-width: 720px){
  .hero__actions .cluster{ gap: 10px; }
  .hero__tip{ margin-top: 18px; padding-top: 12px; }
}

/* =========================================================
   ICONS (SVG inline) — UPDATED (safe for fill + outline icons)
   - avoids "I" looking icons caused by global stroke rules
   - keeps outline icons crisp + consistent
   ========================================================= */

.icon{
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  vertical-align: -0.15em;
  flex: 0 0 auto;
  opacity: .95;

  /* Neutral base: don't force fill by default */
  fill: none;
  stroke: none;
}

/* Solid/fill icons only */
.icon--fill{
  fill: currentColor !important;
  stroke: none !important;
}
.icon--fill *{
  fill: currentColor !important;
  stroke: none !important;
}

/* Outline/stroke icons */
.icon--stroke{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* IMPORTANT: apply to the symbol paths too (use clones content) */
.icon--stroke *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--muted{ opacity: .75; }

.icon-pill{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.card__title{
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* KPI tiles: center icon + text */
.mini-kpi{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .35rem;
  padding: 16px 14px;
}

/* icon size in KPI tile */
.mini-kpi .icon{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin: 0;
}

/* ensure text block doesn't shift */
.mini-kpi > div{ margin: 0; }

@media (max-width: 560px){
  .mini-kpi .icon{
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }
}

/* Mobile: grids en 1 colonne */
@media (max-width: 720px){
  .grid-3{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FIX: KPI tiles (Daily effort / Milk drinks / Maintenance)
   Mobile = 1 row (no wrap) + horizontal scroll
   ========================================================= */
@media (max-width: 720px){

  /* Le conteneur qui wrap tes 3 mini-kpi */
  .hero__meta{
    flex-wrap: nowrap;              /* <-- 1 seule rangée */
    overflow-x: auto;               /* <-- scroll si ça dépasse */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;  /* optionnel mais smooth */
  }

  /* Chaque tuile */
  .hero__meta .mini-kpi{
    flex: 0 0 auto;                 /* ne pas rétrécir au point de casser */
    min-width: 150px;               /* ajuste 140-180 selon ton texte */
    scroll-snap-align: start;
  }

  /* Empêche le texte d’exploser en 2 lignes */
  .hero__meta .mini-kpi strong,
  .hero__meta .mini-kpi .kpi-title{
    white-space: nowrap;
  }
}

/* =========================================================
   HOME PATCH — Top picks + Last updated + hero--full safety
   Drop this at the END of styles.css
   ========================================================= */

/* 1) Hero "full" safety: if you keep hero--full in HTML */
.hero--full{
  width: 100%;
  max-width: none;
}

/* If hero--full causes spacing weirdness, keep this tiny normalization */
.hero.hero--banner.hero--full{
  margin-top: var(--s-7);
}

/* 2) "Top picks right now" section spacing consistency */
.section--tight[aria-label="Top picks right now"] .grid{
  margin-top: var(--s-6);
}

/* 3) Small "Last updated" text style (matches your muted system) */
.last-updated{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--muted);
}
.last-updated time{
  font-weight: 700;
  color: var(--text);
}

/* Optional: add a tiny dot separator utility */
.sep-dot{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  display:inline-block;
}

/* 4) Make your "Updated 2026" badge more “real” when you include a date */
.badge time{
  font: inherit;
  color: inherit;
}

/* 5) Improve card CTA density for the new top picks block */
.section--tight[aria-label="Top picks right now"] .card p{
  margin-bottom: var(--s-4);
}
.section--tight[aria-label="Top picks right now"] .card .btn{
  margin-top: auto;
}

/* 6) Slightly stronger hover on the best card in top picks (CTR micro boost) */
.section--tight[aria-label="Top picks right now"] .card--best:hover{
  transform: translateY(-3px);
  border-color: rgba(167,139,250,.38);
}

/* 7) Mobile: keep 3-card row as stacked (you already force grid-3 to 1 col)
   but add a bit more breathing room */
@media (max-width: 720px){
  .section--tight[aria-label="Top picks right now"] .card{
    padding: var(--s-6);
  }
}

/* 8) Optional: Improve anchor focus clarity inside cards */
.card a:focus-visible{
  box-shadow: var(--ring);
  border-radius: 12px;
}

/* =========================================================
   GRID UTIL — Force 2 columns (desktop) for specific sections
   ========================================================= */
.grid-2cards{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

/* Mobile: stack */
@media (max-width: 720px){
  .grid-2cards{
    grid-template-columns: 1fr;
  }
}