:root {
  --primary: #0066cc;
  --primary-dark: #004c99;
  --primary-light: #e6f2ff;
  --accent: #ff6b00;
  --bg: #ffffff;
  --bg-alt: #f7f9fc;
  --bg-dark: #1a1a2e;
  --text: #1a1a2e;
  --text-muted: #5a6070;
  --border: #e2e8f0;
  --success: #22c55e;
  --warning: #eab308;
  --danger: #ef4444;
  --radius: 16px;
  --radius-sm: 8px;
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
}

a { color: var(--primary); text-decoration: none; transition: all 0.2s; }
a:hover { color: var(--primary-dark); }

img { max-width: 100%; height: auto; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header */
header { background: white; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.logo img { height: 48px; }
.main-nav { display: flex; align-items: center; gap: 8px; }
.main-nav a { color: var(--text); font-weight: 500; padding: 10px 16px; border-radius: var(--radius-sm); }
.main-nav a:hover { background: var(--bg-alt); color: var(--primary); }
.header-cta { background: var(--primary) !important; color: white !important; }
.menu-toggle { display: none; }

/* Breadcrumbs */
.breadcrumbs { padding: 20px 0; font-size: 0.875rem; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs span { margin: 0 10px; color: var(--text-muted); }

/* Hero */
.hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; padding: 80px 0; }
.hero-grid { display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: center; }
.hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 20px; }
.hero-tagline { font-size: 1.35rem; opacity: 0.95; margin-bottom: 32px; }
.hero-stats { display: flex; gap: 40px; }
.hero-stat { text-align: center; }
.hero-stat-value { font-size: 2rem; font-weight: 700; display: block; }
.hero-stat-label { font-size: 0.875rem; opacity: 0.8; }
.brand-card { background: white; border-radius: var(--radius); padding: 40px; text-align: center; box-shadow: var(--shadow-lg); color: var(--text); }

/* Content */
.content-section { padding: 80px 0; }
.content-section:nth-child(even) { background: var(--bg-alt); }
.content-grid { display: grid; grid-template-columns: 1fr 360px; gap: 60px; }
.main-content h2 { font-size: 2rem; font-weight: 700; margin: 40px 0 24px; position: relative; padding-bottom: 16px; }
.main-content h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 60px; height: 4px; background: var(--primary); border-radius: 2px; }
.main-content h2:first-child { margin-top: 0; }
.main-content p { margin-bottom: 20px; }
.main-content ul { margin: 20px 0; padding-left: 24px; }
.main-content li { margin-bottom: 12px; }

/* Intro box */
.intro-box { background: var(--primary-light); border-left: 4px solid var(--primary); padding: 24px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 32px; }

/* Pros/Cons */
.pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }
.pros-box, .cons-box { background: white; border-radius: var(--radius); padding: 28px; border: 1px solid var(--border); }
.pros-box { border-top: 4px solid var(--success); }
.cons-box { border-top: 4px solid var(--danger); }
.pros-box h4 { color: var(--success); }
.cons-box h4 { color: var(--danger); }
.pros-box ul, .cons-box ul { list-style: none; padding: 0; }
.pros-box li, .cons-box li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid var(--border); }
.pros-box li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.cons-box li::before { content: "✕"; position: absolute; left: 0; color: var(--danger); font-weight: 700; }

/* Gammes grid */
.gammes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; }
.gamme-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: all 0.3s; }
.gamme-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.gamme-card h4 { font-size: 1.25rem; color: var(--primary); margin-bottom: 8px; }
.gamme-card .type { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 16px; }
.target-badge { display: inline-block; background: var(--bg-alt); font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; }

/* Sidebar */
.sidebar { position: sticky; top: 100px; }
.sidebar-cta { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: var(--radius); padding: 32px; color: white; text-align: center; margin-bottom: 24px; }
.sidebar-cta h3 { font-size: 1.2rem; margin-bottom: 12px; }
.sidebar-cta p { font-size: 0.9rem; opacity: 0.9; margin-bottom: 20px; }
.btn-cta { display: block; background: white; color: var(--primary); padding: 14px 24px; border-radius: var(--radius-sm); font-weight: 600; text-align: center; margin-bottom: 12px; }
.btn-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-secondary { background: transparent; border: 2px solid rgba(255,255,255,0.4); color: white !important; }
.cta-small { font-size: 0.75rem; opacity: 0.7; margin-top: 16px; }
.sidebar-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; }
.sidebar-card h4 { font-size: 1rem; font-weight: 600; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.specs-list { list-style: none; }
.specs-list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.specs-list .label { color: var(--text-muted); }
.specs-list .value { font-weight: 600; }
.links-list { list-style: none; }
.links-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.links-list a { color: var(--text); }

/* Footer */
footer { background: var(--bg-dark); color: white; padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; margin-bottom: 48px; }
.footer-brand p { opacity: 0.7; margin-top: 16px; }
.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; color: rgba(255,255,255,0.5); }
.footer-col a { display: block; color: rgba(255,255,255,0.85); padding: 8px 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 32px; display: flex; justify-content: space-between; font-size: 0.875rem; color: rgba(255,255,255,0.5); }
.footer-links a { color: rgba(255,255,255,0.5); margin-left: 24px; }

/* Homepage */
.hero-home { padding: 100px 0; text-align: center; }
.hero-home-content { max-width: 800px; margin: 0 auto; }
.hero-home h1 { font-size: 3rem; margin-bottom: 24px; }
.hero-cta-group { display: flex; gap: 16px; justify-content: center; margin-top: 32px; }
.btn-hero-primary { background: white; color: var(--primary); padding: 16px 32px; border-radius: var(--radius-sm); font-weight: 600; font-size: 1.1rem; }
.btn-hero-secondary { background: transparent; border: 2px solid rgba(255,255,255,0.5); color: white; padding: 16px 32px; border-radius: var(--radius-sm); font-weight: 600; }

.section-brands, .section-types, .section-glossary { padding: 80px 0; }
.section-brands { background: var(--bg-alt); }
.section-brands h2, .section-types h2, .section-glossary h2 { text-align: center; font-size: 2rem; margin-bottom: 48px; }
.section-subtitle { text-align: center; color: var(--text-muted); margin-top: -32px; margin-bottom: 32px; }

.brands-grid-home { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-bottom: 32px; }
.brand-card-home { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 24px; text-align: center; transition: all 0.3s; color: var(--text); }
.brand-card-home:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.brand-card-home .brand-logo-placeholder { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
.brand-card-home span { font-size: 0.8rem; color: var(--text-muted); }

.types-grid-home { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.type-card-home { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: all 0.3s; color: var(--text); }
.type-card-home:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.type-card-home h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 8px; }
.type-card-home p { font-size: 0.9rem; color: var(--text-muted); }

.see-all-link { display: block; text-align: center; color: var(--primary); font-weight: 500; margin-top: 24px; }

.section-cta-full { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; padding: 80px 0; text-align: center; }
.cta-full-content h2 { font-size: 2rem; margin-bottom: 16px; }
.cta-full-content p { opacity: 0.9; margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }
.btn-cta-full { display: inline-block; background: white; color: var(--primary); padding: 16px 40px; border-radius: var(--radius-sm); font-weight: 600; font-size: 1.1rem; }
.cta-note { display: block; margin-top: 16px; opacity: 0.7; font-size: 0.85rem; }

.glossary-preview { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.glossary-chip { background: var(--bg-alt); color: var(--text); padding: 10px 18px; border-radius: 30px; font-size: 0.9rem; border: 1px solid var(--border); transition: all 0.2s; }
.glossary-chip:hover { border-color: var(--primary); color: var(--primary); }

/* Index pages */
.hero-index { padding: 60px 0; text-align: center; }
.hero-index h1 { font-size: 2.5rem; margin-bottom: 16px; }
.hero-index p { opacity: 0.9; max-width: 600px; margin: 0 auto; }

.index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.index-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; transition: all 0.3s; color: var(--text); }
.index-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.index-card-logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 16px; }
.index-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.index-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 12px; }
.index-card-meta { font-size: 0.8rem; color: var(--text-muted); }

.glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.glossary-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: all 0.3s; color: var(--text); }
.glossary-card:hover { border-color: var(--primary); }
.glossary-card h3 { font-size: 1rem; color: var(--primary); margin-bottom: 8px; }
.glossary-card p { font-size: 0.9rem; color: var(--text-muted); }

/* Locality pages */
.hero-locality { padding: 60px 0; text-align: center; }

/* ===== MODEL PAGES - Premium Design ===== */
.hero-model { padding: 80px 0; }
.hero-model .brand-badge { 
  display: inline-block; 
  background: rgba(255,255,255,0.15); 
  padding: 8px 20px; 
  border-radius: 30px; 
  font-size: 0.9rem; 
  font-weight: 600; 
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hero-model h1 { font-size: 2.75rem; margin-bottom: 12px; text-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.hero-price { 
  margin-top: 28px;
  background: rgba(255,255,255,0.1);
  display: inline-block;
  padding: 16px 28px;
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}
.hero-price .price-range { font-size: 2.25rem; font-weight: 800; display: block; }
.hero-price .price-label { font-size: 0.85rem; opacity: 0.7; margin-top: 4px; display: block; }
.model-card { 
  background: white; 
  border-radius: var(--radius); 
  padding: 36px; 
  text-align: center; 
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
  color: var(--text);
  transform: perspective(1000px) rotateY(-2deg);
  transition: transform 0.4s ease;
}
.model-card:hover { transform: perspective(1000px) rotateY(0deg) scale(1.02); }
.model-image-placeholder { 
  font-size: 1.5rem; 
  font-weight: 700; 
  color: var(--primary); 
  padding: 50px 24px;
  background: linear-gradient(135deg, var(--bg-alt) 0%, #fff 100%);
  border-radius: var(--radius);
  margin-bottom: 20px;
  border: 2px dashed var(--border);
}
.model-quick-specs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.model-quick-specs span { 
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)); 
  color: white; 
  padding: 8px 16px; 
  border-radius: 25px; 
  font-size: 0.8rem; 
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
}

/* Model content typography */
.main-content h2 { 
  font-size: 1.75rem; 
  font-weight: 700; 
  margin: 48px 0 20px; 
  padding-bottom: 12px;
  border-bottom: 3px solid var(--primary);
  display: inline-block;
}
.main-content h2:first-child { margin-top: 0; }
.main-content h3 { 
  font-size: 1.25rem; 
  font-weight: 600; 
  color: var(--primary-dark);
  margin: 32px 0 16px;
}
.main-content p { 
  font-size: 1.05rem; 
  line-height: 1.8; 
  margin-bottom: 20px;
  color: #374151;
}
.main-content ul { 
  list-style: none; 
  padding: 0; 
  margin: 20px 0;
}
.main-content > ul > li,
.main-content > p + ul > li { 
  padding: 12px 0 12px 36px; 
  position: relative;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}
.main-content > ul > li::before,
.main-content > p + ul > li::before { 
  content: "→"; 
  position: absolute; 
  left: 0; 
  color: var(--primary);
  font-weight: 700;
  font-size: 1.1rem;
}
.main-content > ul > li:last-child { border-bottom: none; }

/* Specs table premium */
.specs-table { margin: 32px 0; }
.specs-table h3 { 
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  padding: 16px 24px;
  border-radius: var(--radius) var(--radius) 0 0;
  margin: 0;
  font-size: 1.1rem;
}
.specs-table table { 
  width: 100%; 
  border-collapse: collapse; 
  background: white;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.specs-table td { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.specs-table tr:last-child td { border-bottom: none; }
.specs-table tr:hover { background: var(--bg-alt); }
.specs-table td:first-child { 
  font-weight: 500; 
  color: var(--text-muted); 
  width: 40%;
  background: rgba(0,0,0,0.02);
}
.specs-table td:last-child { font-weight: 600; color: var(--text); }

/* Variants grid */
.variants-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 28px 0; }
.variant-card { 
  background: linear-gradient(135deg, #fff 0%, var(--bg-alt) 100%);
  border: 2px solid var(--border); 
  border-radius: var(--radius); 
  padding: 28px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.variant-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.variant-card:hover { 
  border-color: var(--primary); 
  box-shadow: 0 20px 40px rgba(0,102,204,0.15);
  transform: translateY(-6px);
}
.variant-card:hover::before { transform: scaleX(1); }
.variant-card h4 { font-size: 1.2rem; color: var(--primary); margin-bottom: 10px; }
.variant-card p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }
.price-badge { 
  display: inline-block;
  background: linear-gradient(135deg, var(--success), #16a34a);
  color: white;
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Ideal for tags */
.ideal-for-tags { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 40px; }
.ideal-for-tags .tag { 
  background: linear-gradient(135deg, var(--primary-light) 0%, #fff 100%);
  border: 2px solid var(--primary);
  color: var(--primary-dark); 
  padding: 12px 24px; 
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s;
}
.ideal-for-tags .tag:hover {
  background: var(--primary);
  color: white;
  transform: scale(1.05);
}

/* Verdict box */
.verdict-box { 
  background: linear-gradient(135deg, var(--primary-light) 0%, #fff 100%);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  padding: 28px 32px;
  font-size: 1.1rem;
  line-height: 1.9;
  position: relative;
}
.verdict-box::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 5rem;
  color: var(--primary);
  opacity: 0.2;
  font-family: Georgia, serif;
  line-height: 1;
}

/* Parent link box */
.parent-link-box { 
  background: linear-gradient(135deg, var(--bg-alt) 0%, #fff 100%);
  border: 2px dashed var(--border);
  padding: 32px; 
  border-radius: var(--radius);
  text-align: center;
  margin: 40px 0;
}
.parent-link-box p { margin-bottom: 20px; font-size: 1.05rem; }
.parent-link-box .btn-cta { 
  display: inline-block; 
  background: var(--primary);
  color: white;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: all 0.3s;
}
.parent-link-box .btn-cta:hover { 
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Hero variant */
.hero-variant { background: linear-gradient(-45deg, #0055aa, #003d7a, #0066cc, #004c99); background-size: 400% 400%; animation: gradientShift 15s ease infinite; }

/* ===== PROFILE PAGES ===== */
.hero-profile { padding: 100px 0; text-align: center; }
.hero-profile-content { max-width: 700px; margin: 0 auto; }
.profile-icon { font-size: 4rem; margin-bottom: 20px; }
.category-badge { 
  display: inline-block; 
  background: rgba(255,255,255,0.2); 
  padding: 6px 16px; 
  border-radius: 20px; 
  font-size: 0.8rem; 
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.hero-profile h1 { font-size: 2.5rem; margin-bottom: 16px; }
.hero-budget { 
  margin-top: 32px;
  background: rgba(255,255,255,0.1);
  display: inline-block;
  padding: 16px 32px;
  border-radius: var(--radius);
}
.hero-budget .budget-range { font-size: 2rem; font-weight: 700; display: block; }
.hero-budget .budget-label { font-size: 0.85rem; opacity: 0.7; }

/* Needs grid */
.needs-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 40px; }
.need-card { 
  background: linear-gradient(135deg, var(--primary-light), #fff);
  border: 1px solid var(--primary);
  padding: 12px 20px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}
.need-icon { color: var(--primary); font-weight: 700; }

/* Criteria bars */
.criteria-bars { margin: 24px 0 40px; }
.criteria-bar { 
  display: flex; 
  align-items: center; 
  gap: 16px; 
  margin-bottom: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.criteria-label { width: 140px; font-weight: 500; color: var(--text-muted); }
.criteria-track { 
  flex: 1; 
  height: 8px; 
  background: var(--bg-alt); 
  border-radius: 4px;
  overflow: hidden;
}
.criteria-fill { 
  height: 100%; 
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 4px;
  transition: width 0.5s ease;
}
.criteria-value { font-weight: 600; color: var(--primary); min-width: 40px; text-align: right; }

/* Warning box */
.warning-box { 
  background: linear-gradient(135deg, #fef3c7, #fff);
  border-left: 4px solid var(--warning);
  padding: 24px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 20px 0;
}

/* Recommended models grid */
.recommended-models-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 24px 0; }
.recommended-model-card { 
  background: white;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: all 0.3s;
  color: var(--text);
}
.recommended-model-card:hover { 
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.recommended-model-card .model-brand { 
  font-size: 0.8rem; 
  text-transform: uppercase; 
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.recommended-model-card h4 { font-size: 1.25rem; color: var(--primary); margin: 8px 0; }
.recommended-model-card .model-type { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 12px; }
.recommended-model-card .model-price { 
  background: linear-gradient(135deg, var(--success), #16a34a);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.recommended-model-card .model-pros { list-style: none; padding: 0; }
.recommended-model-card .model-pros li { 
  padding: 6px 0 6px 20px;
  position: relative;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.recommended-model-card .model-pros li::before { 
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
}

/* Top pick box */
.top-pick-box { 
  background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
  border: 2px solid var(--warning);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
}
.top-pick-badge { 
  position: absolute;
  top: -12px;
  left: 24px;
  background: linear-gradient(135deg, var(--warning), #d97706);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}
.top-pick-box p { margin-top: 8px; font-size: 1.05rem; line-height: 1.8; }

/* Responsive */
@media (max-width: 1024px) {
  .content-grid { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .hero-grid { grid-template-columns: 1fr; }
  .gammes-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero h1 { font-size: 2rem; }
  .hero-home h1 { font-size: 1.75rem; }
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .pros-cons-grid { grid-template-columns: 1fr; }
  .gammes-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .brands-grid-home { grid-template-columns: repeat(2, 1fr); }
  .types-grid-home { grid-template-columns: 1fr; }
  .index-grid { grid-template-columns: 1fr; }
  .glossary-grid { grid-template-columns: 1fr; }
  .hero-cta-group { flex-direction: column; }
}