:root {
  --bg: #f5f5f7;
  --bg-card: #ffffff;
  --text: #1f2933;
  --accent: #0072ce;
  --accent-soft: #e0f0ff;
  --border: #e0e0e0;
  --radius: 12px;
  --shadow-soft: 0 8px 20px rgba(0,0,0,0.04);
}

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Breadcrumbs */
.breadcrumbs {
  background: var(--bg);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumbs__link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumbs__link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.breadcrumbs__separator {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.breadcrumbs__current {
  color: var(--text);
  font-weight: 500;
}

/* Header */
.header {
  background: #ffffff;
  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: 0.75rem 0;
}

.logo {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
}

.logo:hover {
  text-decoration: none;
}

/* Nav simple */
.nav__list {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
}

.nav__list a {
  color: var(--text);
  font-weight: 500;
  padding: 0.5rem 0;
}

/* Hero */
.hero {
  background: linear-gradient(120deg, #ffffff, #eef4ff);
  padding: 3rem 0 2rem;
}

.hero__content h1 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.hero__content p {
  font-size: 1.1rem;
  color: #64748b;
  margin-bottom: 1.5rem;
}

.hero__trust {
  display: flex;
  gap: 2rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.hero__actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  background: #005bb5;
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--bg);
  text-decoration: none;
}

/* Sections */
.section {
  padding: 2.5rem 0;
}

.section__intro {
  max-width: 640px;
  font-size: 1.1rem;
  color: #64748b;
  margin-bottom: 1.5rem;
}

.section h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--text);
}

/* Filters */
.filters {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}

.filters__form {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.filters__results {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-weight: 500;
  color: var(--accent);
}

.filters__form label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text);
}

.filters__form select {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  min-width: 150px;
}

/* Grid produits */
.grid--products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.product-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.product-card__badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  width: fit-content;
}

.product-card__image {
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.product-card__image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.product-card__title {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

.product-card__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.stars {
  color: #ffc107;
  font-size: 1rem;
  letter-spacing: 1px;
}

.rating-text {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.product-card__price {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--accent);
  margin: 1rem 0;
}

.product-card__stock {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0.5rem;
  background: #f0f9ff;
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: #059669;
}

.product-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}

.product-card__features li {
  padding: 0.25rem 0;
  position: relative;
  padding-left: 1.2rem;
}

.product-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #22c55e;
  font-weight: bold;
}

.product-card__cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Content sections */
.section--content {
  background: #ffffff;
}

.content {
  max-width: 800px;
  margin: 0 auto;
}

.content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.content p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.content ul, .content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* FAQ */
.section--faq {
  background: #ffffff;
}

.faq {
  max-width: 800px;
  margin: 0 auto;
}

.faq__item {
  background: var(--bg);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--border);
}

.faq__question {
  width: 100%;
  text-align: left;
  padding: 1rem 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq__question::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.faq__question.active::after {
  transform: rotate(45deg);
}

.faq__answer {
  padding: 0 1.2rem 1rem;
  display: none;
  color: #64748b;
  line-height: 1.6;
}

.faq__cta {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem;
  background: var(--accent-soft);
  border-radius: var(--radius);
}

.faq__cta h3 {
  margin: 0 0 0.5rem 0;
  color: var(--accent);
  font-size: 1.5rem;
}

.faq__cta p {
  margin: 0 0 1.5rem 0;
  color: var(--text-muted);
}

/* Three paths section */
.paths {
  background: #ffffff;
  padding: 2.5rem 0;
}

.paths__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.path-card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.path-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.path-card__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.path-card h3 {
  margin-bottom: 0.75rem;
  color: var(--text);
}

.path-card p {
  color: #64748b;
  margin-bottom: 1.5rem;
}

/* Newsletter */
.newsletter {
  background: linear-gradient(135deg, var(--accent) 0%, #0056b3 100%);
  color: white;
  padding: 3rem 0;
  margin-top: 4rem;
}

.newsletter__content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}

.newsletter__text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.newsletter__text p {
  margin: 0;
  opacity: 0.9;
}

.newsletter__form {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.newsletter__input {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  min-width: 280px;
}

.newsletter__privacy {
  grid-column: 1 / -1;
  margin: 1rem 0 0 0;
  font-size: 0.85rem;
  opacity: 0.8;
  text-align: center;
}

/* Footer */
.footer {
  background: var(--text);
  color: #ffffff;
  padding: 3rem 0 1rem;
}

.footer__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.footer__brand h4 {
  margin: 0 0 0.5rem 0;
  color: var(--accent-soft);
  font-size: 1.25rem;
}

.footer__brand p {
  margin: 0;
  color: #9ca3af;
  font-size: 0.9rem;
}

.footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.footer__column h5 {
  margin: 0 0 1rem 0;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
}

.footer__column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__column li {
  margin-bottom: 0.5rem;
}

.footer__column a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.footer__column a:hover {
  color: #ffffff;
}

.footer__legal {
  border-top: 1px solid #374151;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__legal p {
  margin: 0;
  font-size: 0.85rem;
  color: #9ca3af;
}

.footer__nav {
  display: flex;
  gap: 2rem;
}

.footer__nav a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer__nav a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Icons SVG */
.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
}

.icon--large {
  width: 48px;
  height: 48px;
}

.icon--medical {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--gaming {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'%3E%3Cpath d='M21.58 16.09l-1.09-7.66C20.21 6.46 18.52 5 16.53 5H7.47C5.48 5 3.79 6.46 3.51 8.43l-1.09 7.66C2.2 17.63 3.39 19 4.94 19c.68 0 1.32-.27 1.8-.75L9 16h6l2.25 2.25c.48.48 1.12.75 1.8.75 1.56 0 2.75-1.37 2.53-2.91zM11 11H9v2H8v-2H6v-1h2V8h1v2h2v1zm4.5 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm2-3c-.83 0-1.5-.67-1.5-1.5S16.67 6 17.5 6 19 6.67 19 7.5 18.33 9 17.5 9z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--desk {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'%3E%3Cpath d='M4 6v2h16V6H4zm0 5v3h3v-3H4zm5 0v3h6v-3H9zm8 0v3h3v-3h-3zM4 16v2h16v-2H4z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--guide {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--check {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328a745' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--star {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffc107' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--truck {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328a745' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--budget {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--no-wheels {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--spine {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--executive {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Badges de classement CSS */
.badge-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.9rem;
  color: white;
  margin-right: 0.5rem;
}

.badge-rank--1 {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.badge-rank--2 {
  background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
  box-shadow: 0 2px 8px rgba(192, 192, 192, 0.3);
}

.badge-rank--3 {
  background: linear-gradient(135deg, #cd7f32, #b8860b);
  box-shadow: 0 2px 8px rgba(205, 127, 50, 0.3);
}

.badge-rank--4,
.badge-rank--5 {
  background: linear-gradient(135deg, #0072ce, #005bb5);
  box-shadow: 0 2px 8px rgba(0, 114, 206, 0.3);
}

/* Testimonials section */
.testimonials {
  background: var(--accent-soft);
  padding: 3rem 0;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.testimonial {
  background: white;
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.testimonial::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  font-size: 3rem;
  color: var(--accent);
  font-family: serif;
  line-height: 1;
}

.testimonial__text {
  margin: 0 0 1rem 0;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.1rem;
}

.testimonial__info h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

.testimonial__info p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.testimonials__stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.stat {
  text-align: center;
}

.stat__number {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  color: var(--accent);
  line-height: 1;
}

.stat__label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Gaming specific icons */
.icon--value {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'%3E%3Cpath d='M13 2.05v2.02c4.39.54 7.5 4.53 6.96 8.92-.39 3.18-2.34 5.13-5.52 5.52-4.39.54-8.38-2.57-8.92-6.96S7.09 3.05 11.48 2.51L13 2.05zm-2 8.95c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--price {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328a745' viewBox='0 0 24 24'%3E%3Cpath d='M7 17h2v2H7v-2zm0-8h2v6H7V9zm4 8h2v2h-2v-2zm0-8h2v6h-2V9zm4 8h2v2h-2v-2zm0-8h2v6h-2V9z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--premium {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffd700' viewBox='0 0 24 24'%3E%3Cpath d='M5 16L3 5l5.5 1L12 4l3.5 2L21 5l-2 11H5zm2.7-2h8.6l.9-5.4-2.1-.4L12 9.7 8.9 8.2l-2.1.4L7.7 14z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--target {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--cool {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2317a2b8' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--sleep {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%236f42c1' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 2c-5.33 4.55-8 8.48-8 11.8 0 4.98 3.8 8.2 8 8.2s8-3.22 8-8.2C20.5 10.48 17.83 6.55 12.5 2zm2.5 16c-2.76 0-5-2.24-5-5 0-2.05 1.23-4.28 3.75-6.84C15.77 8.72 17 10.95 17 13c0 2.76-2.24 5-5 5z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Standing desk specific icons */
.icon--health {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--productivity {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328a745' viewBox='0 0 24 24'%3E%3Cpath d='M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--calories {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff6b35' viewBox='0 0 24 24'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--electric {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffc107' viewBox='0 0 24 24'%3E%3Cpath d='M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--manual {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%236c757d' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--converter {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2317a2b8' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Comparatifs specific icons */
.icon--podium {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffd700' viewBox='0 0 24 24'%3E%3Cpath d='M5 16L3 5l5.5 1L12 4l3.5 2L21 5l-2 11H5zm2.7-2h8.6l.9-5.4-2.1-.4L12 9.7 8.9 8.2l-2.1.4L7.7 14z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--spine {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328a745' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--gamepad {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%236f42c1' viewBox='0 0 24 24'%3E%3Cpath d='M6 9h2v2H6V9zm0 4h2v2H6v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--wallet {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328a745' viewBox='0 0 24 24'%3E%3Cpath d='M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--adjustable {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2317a2b8' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--medical {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='0 0 24 24'%3E%3Cpath d='M19 8h-2v3h-3v2h3v3h2v-3h3v-2h-3V8zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Guides specific icons */
.icon--checklist {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328a745' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-3 17l-3-3 1.41-1.41L11 16.17l4.59-4.58L17 13l-6 6z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--warning {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffc107' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--versus {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%236f42c1' viewBox='0 0 24 24'%3E%3Cpath d='M9 11H7v3h2v-3zm4 0h-2v3h2v-3zm4 0h-2v3h2v-3zm2-7h-2v2h2V4zm0 4h-2v2h2V8zm0 4h-2v2h2v-2zM5 8H3v2h2V8zm0-4H3v2h2V4zm0 8H3v2h2v-2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--settings {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%236c757d' viewBox='0 0 24 24'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--home-office {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2317a2b8' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--briefcase {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23495057' viewBox='0 0 24 24'%3E%3Cpath d='M10 16V8a6 6 0 1 1 12 0v8a2 2 0 0 1-2 2H12a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--tall-person {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23495057' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.icon--student {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23007bff' viewBox='0 0 24 24'%3E%3Cpath d='M5,13.18v4L12,21l7-3.82v-4L12,17.18L5,13.18zM12,2L2,7l10,5l10-5L12,2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Responsive */
@media (max-width: 768px) {
  .nav__toggle {
    display: inline-block;
  }
  
  .nav__list {
    display: none;
    flex-direction: column;
    background: #ffffff;
    position: absolute;
    right: 1.5rem;
    top: 100%;
    padding: 1rem;
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius);
    min-width: 200px;
  }
  
  .nav__list.nav__list--open {
    display: flex;
  }
  
  .hero {
    padding-top: 2rem;
  }
  
  .hero__content h1 {
    font-size: 1.75rem;
  }
  
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filters__form {
    flex-direction: column;
  }
  
  .grid--products {
    grid-template-columns: 1fr;
  }
  
  .paths__grid {
    grid-template-columns: 1fr;
  }
  
  .footer__inner {
    flex-direction: column;
    text-align: center;
  }
  
  .footer__nav {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
  
  .hero__content h1 {
    font-size: 1.5rem;
  }
  
  .section {
    padding: 2rem 0;
  }
}