/* ============================================
   EcransPC — Design System Overrides
   Global polish, nav, images, typography
   ============================================ */

/* ===========================================
   NAV ACTIVE STATE
   =========================================== */
.nav__link--active {
  color: #fff !important;
  font-weight: 600 !important;
  background: none !important;
  text-shadow: 0 0 12px rgba(124, 106, 239, 0.5);
}

.nav__link--active:hover {
  color: #fff !important;
  background: none !important;
}

/* ===========================================
   GLOBAL TYPOGRAPHY — reading comfort
   =========================================== */

/* Body text in articles — airy reading */
.container--narrow p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #d1d5db;
  margin-bottom: 16px;
}

/* H2 — chapter separator with colored left border */
.container--narrow h2 {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-top: 64px;
  margin-bottom: 20px;
  padding-left: 16px;
  border-left: 3px solid #7c6aef;
}

/* H3 — subsection */
.container--narrow h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: 36px;
  margin-bottom: 12px;
}

/* First H2 in content — reduced top margin */
.key-takeaways + h2,
.article__toc + h2,
.article__toc + .key-takeaways + h2 {
  margin-top: 40px;
}

/* ===========================================
   PRODUCT IMAGES — no white frames
   =========================================== */
img[data-product],
img[src*="media-amazon"] {
  border: none !important;
}

.product-card__image {
  background: transparent !important;
  border: none !important;
  padding: 0;
  margin-bottom: 16px;
}

.product-card__image img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===========================================
   LISTS — custom icons instead of bullets
   =========================================== */

/* Pros (green check SVG) */
.pros ul {
  list-style: none;
  padding: 0;
}

.pros ul li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 8px;
  line-height: 1.7;
  color: #ccc;
}

.pros ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Cons (red X SVG) */
.cons ul {
  list-style: none;
  padding: 0;
}

.cons ul li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 8px;
  line-height: 1.7;
  color: #ccc;
}

.cons ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* General article lists — subtle arrow */
.container--narrow ul:not(.key-takeaways__list):not(.article__toc *):not(.faq__answer ul):not(.pros ul):not(.cons ul):not(.footer__links):not(.article-toc__list) {
  list-style: none;
  padding: 0;
}

.container--narrow ul:not(.key-takeaways__list):not(.article__toc *):not(.faq__answer ul):not(.pros ul):not(.cons ul):not(.footer__links):not(.article-toc__list) > li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 8px;
  line-height: 1.7;
  color: #ccc;
}

.container--narrow ul:not(.key-takeaways__list):not(.article__toc *):not(.faq__answer ul):not(.pros ul):not(.cons ul):not(.footer__links):not(.article-toc__list) > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237c6aef' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ===========================================
   TABLES — row hover
   =========================================== */
/* Tables — row hover */
.styled-table tr:hover td,
.comparison-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

/* ===========================================
   PROS/CONS GRID — side by side on desktop
   =========================================== */
.product-card__pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}

.product-card__pros-cons h4 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.pros h4 { color: #34d399; }
.cons h4 { color: #f87171; }

@media (max-width: 640px) {
  .product-card__pros-cons {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   RELATED GRID — proper spacing
   =========================================== */
.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ===========================================
   PRODUCT CARD — consistent styling
   =========================================== */
.product-card {
  background: #080808;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
}

.product-card__header {
  margin-bottom: 16px;
}

.product-card__badge {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  width: fit-content;
  color: #a29bfe;
  background: rgba(124, 106, 239, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.product-card__title {
  font-size: 1.375rem;
  font-weight: 800;
  color: #f5f5f7;
  letter-spacing: -0.02em;
}

.product-card__subtitle {
  font-size: 0.9375rem;
  color: #666680;
}

.product-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.product-card__content {
  margin-bottom: 20px;
}

.product-card__content p {
  margin-bottom: 12px;
}

.product-card__footer {
  margin-top: 16px;
}

/* ===========================================
   GLOBAL PAGE BG (dark)
   =========================================== */
main {
  background: #030303;
}

.section--alt,
section[style*="color-bg-alt"] {
  background: #060608 !important;
}

/* ===========================================
   LIGHT MODE OVERRIDES
   =========================================== */
[data-theme="light"] main {
  background: var(--color-bg);
}

[data-theme="light"] .section--alt,
[data-theme="light"] section[style*="color-bg-alt"] {
  background: var(--color-bg-alt) !important;
}

/* Nav active */
[data-theme="light"] .nav__link--active {
  color: #6C5CE7 !important;
  text-shadow: none;
}

/* Typography */
[data-theme="light"] .container--narrow p {
  color: var(--color-text-secondary);
}

[data-theme="light"] .container--narrow h2 {
  color: var(--color-text);
  border-left-color: #6C5CE7;
}

[data-theme="light"] .container--narrow h3 {
  color: var(--color-text);
}

/* Lists */
[data-theme="light"] .pros ul li,
[data-theme="light"] .cons ul li,
[data-theme="light"] .container--narrow ul > li {
  color: var(--color-text-secondary);
}

/* Product cards */
[data-theme="light"] .product-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="light"] .product-card__image {
  background: var(--color-bg-alt) !important;
  border-color: var(--color-border) !important;
}

[data-theme="light"] .product-card__title {
  color: var(--color-text);
}

[data-theme="light"] .product-card__subtitle {
  color: var(--color-text-secondary);
}

/* Images — lighter shadow in light mode */
[data-theme="light"] img[data-product],
[data-theme="light"] img[src*="media-amazon"] {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
}

/* Tables */
[data-theme="light"] .styled-table,
[data-theme="light"] .comparison-table {
  background: var(--color-surface) !important;
  border-color: var(--color-border);
}

[data-theme="light"] .styled-table th {
  color: var(--color-text-secondary);
  border-bottom-color: var(--color-border);
}

[data-theme="light"] .styled-table td {
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}

[data-theme="light"] .styled-table td:first-child {
  color: var(--color-text-secondary);
}

[data-theme="light"] .styled-table tr:hover td,
[data-theme="light"] .comparison-table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .styled-table .best { color: #6C5CE7; }
[data-theme="light"] .styled-table .highlight { color: #00897B; }

/* Callouts */
[data-theme="light"] .callout--info { background: rgba(0, 206, 201, 0.08); }
[data-theme="light"] .callout--warning { background: rgba(245, 189, 65, 0.08); }
[data-theme="light"] .callout--tip { background: rgba(108, 92, 231, 0.08); }
[data-theme="light"] .callout p { color: var(--color-text-secondary); }

/* Key takeaways */
[data-theme="light"] .key-takeaways {
  background: rgba(108, 92, 231, 0.06);
  border-color: rgba(108, 92, 231, 0.2);
}

[data-theme="light"] .key-takeaways__list li {
  color: var(--color-text);
}

/* Expert verdict */
[data-theme="light"] .expert-verdict {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

[data-theme="light"] .expert-verdict p {
  color: var(--color-text-secondary);
}

/* Product spotlight */
[data-theme="light"] .product-spotlight {
  background: var(--color-surface);
  border-color: rgba(108, 92, 231, 0.2);
}

[data-theme="light"] .product-spotlight__name {
  color: var(--color-text);
}

[data-theme="light"] .product-spotlight__desc {
  color: var(--color-text-secondary);
}

/* Article TOC */
[data-theme="light"] .article__toc {
  background: rgba(245, 245, 250, 0.9);
  border-color: var(--color-border);
}

[data-theme="light"] .article__toc-link {
  color: var(--color-text-muted);
}

[data-theme="light"] .article__toc-link:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.04);
}

/* Article header */
[data-theme="light"] .article__title {
  color: var(--color-text);
}

[data-theme="light"] .article__lead {
  color: var(--color-text-secondary);
}

/* Homepage sections */
[data-theme="light"] .hero-home {
  background: var(--color-bg);
}

[data-theme="light"] .usage-section {
  background: var(--color-bg);
}

[data-theme="light"] .picks-section {
  background: var(--color-bg);
}

[data-theme="light"] .pick {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="light"] .pick__name {
  color: var(--color-text);
}

[data-theme="light"] .pick__desc {
  color: var(--color-text-secondary);
}

[data-theme="light"] .pick__pill {
  color: var(--color-text-secondary);
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--color-border);
}

[data-theme="light"] .usage-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="light"] .usage-card__title {
  color: var(--color-text);
}

[data-theme="light"] .usage-card__desc {
  color: var(--color-text-secondary);
}

/* Hero buttons */
[data-theme="light"] .hero-btn--ghost {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

[data-theme="light"] .hero-btn--ghost:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.03);
}

/* Hero stats */
[data-theme="light"] .hero-home__stat-number {
  color: var(--color-text);
}

[data-theme="light"] .hero-home__stat-label {
  color: var(--color-text-muted);
}

[data-theme="light"] .hero-home__stat-sep {
  background: var(--color-border);
}

/* Hero scene */
[data-theme="light"] .hero-home__scene-glow {
  opacity: 0.3;
}

/* Learn cards */
[data-theme="light"] .learn-card-lg {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="light"] .learn-card-lg__title {
  color: var(--color-text);
}

[data-theme="light"] .learn-card-lg__desc {
  color: var(--color-text-secondary);
}

[data-theme="light"] .learn-card-lg__arrow {
  color: var(--color-text-muted);
}

/* Guide tiles */
[data-theme="light"] .guide-tile {
  border-color: var(--color-border);
}

/* FAQ */
[data-theme="light"] .faq__question {
  color: var(--color-text);
}

[data-theme="light"] .faq__answer p {
  color: var(--color-text-secondary);
}

/* --- Light mode: Comparateur --- */
[data-theme="light"] .comp-page { background: var(--color-bg); }
[data-theme="light"] .comp-filters { background: rgba(245,245,250,0.9); border-bottom-color: var(--color-border); }
[data-theme="light"] .comp-thead { background: rgba(245,245,250,0.9); }
[data-theme="light"] .comp-row { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="light"] .comp-row:hover { background: var(--color-surface-hover); border-color: var(--color-border-light); }
[data-theme="light"] .comp-row__title { color: var(--color-text); }
[data-theme="light"] .comp-row__sub { color: var(--color-text-muted); }
[data-theme="light"] .filter-pill { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-secondary); }
[data-theme="light"] .filter-pill:hover { color: var(--color-text); border-color: var(--color-border-light); }
[data-theme="light"] .filter-pill--active { background: rgba(108,92,231,0.1); border-color: rgba(108,92,231,0.3); color: #6C5CE7; }
[data-theme="light"] .comp-hero__title { color: var(--color-text); }
[data-theme="light"] .comp-hero__desc { color: var(--color-text-secondary); }

/* --- Light mode: Wiki / Base de connaissances --- */
[data-theme="light"] .wiki-page { background: var(--color-bg); }
[data-theme="light"] .wiki-search__input { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
[data-theme="light"] .wiki-search__input::placeholder { color: var(--color-text-muted); }
[data-theme="light"] .wiki-sidebar__link { color: var(--color-text-secondary); }
[data-theme="light"] .wiki-sidebar__link:hover { color: var(--color-text); background: rgba(0,0,0,0.03); }
[data-theme="light"] .wiki-sidebar__cta { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="light"] .wcard { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="light"] .wcard:hover { border-color: var(--color-border-light); }
[data-theme="light"] .wcard__title { color: var(--color-text); }
[data-theme="light"] .wcard__desc { color: var(--color-text-secondary); }
[data-theme="light"] .wiki-hero__title { color: var(--color-text); }
[data-theme="light"] .wiki-hero__desc { color: var(--color-text-secondary); }

/* --- Light mode: Guides index --- */
[data-theme="light"] .guides-page { background: var(--color-bg); }
[data-theme="light"] .gcard { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="light"] .gcard:hover { border-color: var(--color-border-light); box-shadow: var(--shadow-lg); }
[data-theme="light"] .gcard__title { color: var(--color-text); }
[data-theme="light"] .gcard__desc { color: var(--color-text-secondary); }
[data-theme="light"] .guides-hero__title { color: var(--color-text); }
[data-theme="light"] .guides-hero__desc { color: var(--color-text-secondary); }