/*
Theme Name: ECRTECH1.5
Theme URI: https://ecrtech.example
Author: ECRtech
Description: Évolution du thème ECRtech — page d'accueil responsive (menu burger mobile, stats YouTube animées, ascenseurs horizontaux tests/guides, bloc Suivez ECRtech, carrousel des dernières vidéos, sidebar desktop). Tout le reste (types de contenu, score EcoRadinMalin, liens affiliés, SEO, newsletter) reprend fidèlement le thème ECRtech.
Version: 1.5.7
Requires PHP: 7.4
Text Domain: ecrtech15
*/

:root {
  --navy: #0C1B30;
  --navy-2: #0F213B;
  --blue: #1E5A96;
  --accent: #DC2F2F;
  --accent-dark: #A82418;
  --green: #2E9E52;
  --amber: #E4A93D;
  --bg: #F5F6F8;
  --text: #101826;
  --muted: #5E6B80;
  --muted-2: #7C8CA3;
  --border: #ECEDF1;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Public Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  margin: 0;
}

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

img { max-width: 100%; display: block; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; font-weight: 600;
  font-size: 15px; cursor: pointer; white-space: nowrap; border: none;
}
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); }

.tag {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.tag-test { background: #FEEAE7; color: var(--accent); }
.tag-guide { background: #E9F1FB; color: var(--blue); }
.tag-energie { background: #EAF7EE; color: var(--green); }

.card {
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,38,.06), 0 1px 1px rgba(16,24,38,.04);
  border: 1px solid var(--border);
}

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 30; background: var(--navy);
  padding: 0 40px; display: flex; align-items: center; justify-content: space-between;
  height: 76px; border-bottom: 1px solid rgba(255,255,255,.06);
  gap: 16px;
}
.site-header .brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.site-header .brand a { min-width: 0; }
.site-header .brand img { width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; }
.site-header .brand-name { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.site-header .brand-tagline { color: #8CA0BE; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; }
.main-nav a { color: #B9C4D4; font-size: 14.5px; font-weight: 600; }
.main-nav a:hover, .main-nav .current-menu-item > a { color: #fff; }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.menu-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: 8px;
  background: transparent; border: none; color: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.menu-toggle:hover { background: rgba(255,255,255,.1); }

/* ===== Menu mobile (tiroir) ===== */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--navy); color: #fff;
  display: flex; flex-direction: column;
  padding: 22px 24px;
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none !important; }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mobile-menu__close {
  width: 40px; height: 40px; border-radius: 8px; background: transparent; border: none;
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mobile-menu__close:hover { background: rgba(255,255,255,.1); }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0 0 18px; padding: 0; }
.mobile-menu__nav a {
  display: block; color: #fff; font-size: 18px; font-weight: 700;
  padding: 14px 2px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu__secondary { display: flex; flex-direction: column; gap: 2px; margin-bottom: 26px; }
.mobile-menu__secondary a {
  color: rgba(255,255,255,.72); font-size: 14.5px; font-weight: 600;
  padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.mobile-menu__foot { margin-top: auto; padding-top: 18px; }
.mobile-menu__foot .btn { width: 100%; justify-content: center; }

/* ===== Hero (front page) ===== */
.hero { position: relative; background: var(--navy); overflow: hidden; padding: 36px 40px 44px; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(30,90,150,.5), transparent 45%),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 25% 30%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 25% 30%, black 0%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px circle at 88% 12%, rgba(220,63,48,.24), transparent 60%),
    radial-gradient(520px circle at 8% 95%, rgba(30,90,150,.32), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 56px; align-items: center; }
.hero h1 { color: #fff; font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -.01em; }
.hero p.lede { color: #A9B7CB; font-size: 17px; line-height: 1.6; max-width: 480px; }
.hero-video-card { border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.hero-video-thumb { border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }

/* ===== Barre de stats YouTube (même ergonomie mobile / tablette / PC) ===== */
.stats-bar { background: #fff; border-bottom: 1px solid var(--border); }
.stats-bar__inner {
  max-width: 1280px; margin: 0 auto; padding: 14px 40px;
  display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 10px 24px;
}
.stats-bar .stat { display: flex; align-items: baseline; gap: 7px; }
.stats-bar .stat .num { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: var(--navy); }
.stats-bar .stat .lbl { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.stats-bar__divider { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }

/* ===== Cards grid ===== */
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 10px; }
.section-title h2 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.grid-3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.post-card-img { aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: var(--blue); }
.post-card-body { padding: 20px; display: flex; flex-direction: column; gap: 9px; }
.post-card-body h3 { font-size: 16.5px; line-height: 1.32; color: var(--text); }
.post-card-meta { font-size: 12.5px; color: var(--muted); }

/* ===== Video grid (dark) ===== */
.video-section { background: var(--navy); padding: 56px 40px; }
.video-section h2 { color: #fff; }
.video-thumb { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background-size: cover; background-position: center; background-color: var(--navy-2); }
.video-thumb .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-thumb .play span { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
.video-thumb .dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px; }
.video-title { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; margin-top: 10px; }
.video-meta { color: #7C8CA3; font-size: 12.5px; }

/* ===== Newsletter ===== */
.newsletter { border-radius: 24px; padding: 44px 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; background: var(--accent); }
.newsletter h2 { color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.newsletter p { color: rgba(255,255,255,.85); font-size: 14.5px; margin: 0; }
.newsletter form { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 420px; }
.newsletter input[type="email"] { flex: 1; padding: 14px 18px; border-radius: 999px; border: none; font-size: 14.5px; font-family: inherit; min-width: 0; }

/* ===== Footer ===== */
.site-footer { margin-top: 80px; background: var(--navy); padding: 56px 40px 28px; }
.footer-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid h3 { color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.footer-grid a { color: #8CA0BE; font-size: 14px; display: block; margin-bottom: 12px; }
.footer-bottom { max-width: 1280px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); color: #5E7089; font-size: 12.5px; }

/* ===== Single test page ===== */
.breadcrumb { max-width: 1180px; margin: 0 auto; padding: 22px 40px 0; font-size: 13px; color: var(--muted); }
.article-header { max-width: 1180px; margin: 0 auto; padding: 18px 40px 0; }
.article-header h1 { font-size: 34px; line-height: 1.2; font-weight: 700; margin: 14px 0 10px; max-width: 820px; letter-spacing: -.01em; }
.affiliate-disclosure { max-width: 1180px; margin: 16px auto 0; padding: 0 40px; }
.affiliate-disclosure .box { display: flex; align-items: center; gap: 10px; background: #FFF8E8; border: 1px solid #F3E3B8; border-radius: 12px; padding: 11px 16px; }
.affiliate-disclosure .box p { font-size: 13px; color: #7A5F17; margin: 0; }
.test-hero-img { max-width: 1180px; margin: 20px auto 0; padding: 0 40px; }
.test-hero-img .ph { border-radius: 20px; aspect-ratio: 21/9; background-size: cover; background-position: center; background-color: var(--blue); }
.test-body { max-width: 1180px; margin: 0 auto; padding: 40px 40px 90px; display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.test-body p { font-size: 15.5px; line-height: 1.75; color: #33404F; margin: 0 0 18px; }
.test-body h2 { font-size: 21px; font-weight: 700; margin: 34px 0 14px; }

/* ===== Tables dans le contenu des articles ===== */
.wp-block-table { overflow-x: auto; margin: 26px 0; }
.wp-block-table table, .wrap table { width: 100%; border-collapse: collapse; table-layout: auto; }
.wp-block-table th, .wp-block-table td, .wrap table th, .wrap table td { padding: 11px 16px; border: 1px solid var(--border); text-align: left; font-size: 14.5px; line-height: 1.5; }
.wp-block-table thead th, .wrap table thead th { background: #F5F6F8; font-weight: 700; white-space: nowrap; }
.wp-block-table tbody tr:nth-child(even), .wrap table tbody tr:nth-child(even) { background: #FAFBFC; }
.video-embed-card .head { padding: 16px 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 700; }
.video-embed-card .thumb { position: relative; display: block; aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--navy-2); }
.video-embed-card .thumb .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-embed-card .thumb .play span { width: 64px; height: 64px; border-radius: 50%; background: rgba(220,63,48,.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(220,63,48,.4); }
.affiliate-inline { padding: 22px 24px; margin: 28px 0; }
.affiliate-inline .row { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 10px; }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; }
.pros-cons .card { padding: 20px 22px; }
.sidebar-sticky { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.score-total { font-size: 40px; font-weight: 700; color: var(--accent); }
.bottom-cta { margin-top: 32px; border-radius: 18px; background: var(--navy); padding: 30px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ===== Carrousel horizontal (À la une / Derniers tests / Guides & DIY) ===== */
.news-carousel-wrap { position: relative; margin-top: 8px; }
.news-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.news-carousel::-webkit-scrollbar { display: none; }
.news-carousel .card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.news-carousel-viewall {
  flex: 0 0 200px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  background: var(--navy);
  color: #fff;
  border-radius: 16px;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  padding: 20px;
}
.news-carousel-viewall svg { flex-shrink: 0; }
.news-carousel-viewall:hover { background: var(--navy-2); }
.news-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(16,24,38,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
}
.news-carousel-arrow.prev { left: -14px; }
.news-carousel-arrow.next { right: -14px; }
.news-carousel-arrow:hover { background: var(--bg); }
@media (max-width: 640px) {
  .news-carousel-arrow { display: none; }
  .news-carousel .card { flex-basis: 240px; }
}

/* ===== Fiche produit : tableau simple (pattern fin d'article) ===== */
.card.affiliate-inline .wp-block-table {
  margin: 0 0 16px;
}
.produit-table table {
  width: 100%;
  border-collapse: collapse;
}
.produit-table td {
  padding: 13px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
  vertical-align: middle;
}
.produit-table tr:last-child td {
  border-bottom: none;
}
.produit-table td:first-child {
  font-weight: 600;
  color: var(--text);
}
.produit-table td:last-child {
  text-align: right;
  font-weight: 700;
}
.produit-table a {
  color: var(--accent);
}

/* =========================================================
   ECRTECH1.5 — nouveaux blocs de la page d'accueil
   ========================================================= */

/* Suivez ECRtech : icônes réseaux sociaux en couleur */
.follow-block {
  position: relative; overflow: hidden; border-radius: 18px; padding: 24px;
  background: linear-gradient(135deg, #F3F7FC 0%, #E6EDF7 100%);
  border: 1px solid rgba(30,90,150,.12);
  box-shadow: 0 10px 26px rgba(15,33,59,.08);
}
.follow-block__badge {
  position: absolute; top: -20px; right: -12px; font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 104px; font-weight: 700; line-height: 1; color: rgba(30,90,150,.07);
  pointer-events: none; user-select: none;
}
.follow-block__icon {
  position: relative; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; box-shadow: 0 6px 14px rgba(30,90,150,.22);
}
.follow-block h3 { position: relative; font-size: 16.5px; margin-bottom: 6px; color: var(--text); }
.follow-block__desc { position: relative; color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 18px; max-width: 92%; }
.follow-row { position: relative; display: flex; gap: 11px; flex-wrap: wrap; }
.follow-icon { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: block; flex-shrink: 0; box-shadow: 0 4px 10px rgba(15,33,59,.14); transition: transform .15s ease, box-shadow .15s ease; }
.follow-icon svg { width: 100%; height: 100%; display: block; }
.follow-icon:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(15,33,59,.2); }

/* Les partenaires (codes promo) */
.partners-block {
  position: relative; overflow: hidden; border-radius: 18px; padding: 24px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 10px 26px rgba(220,47,47,.22);
  display: none;
}
.partners-block__badge {
  position: absolute; top: -18px; right: -10px; font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 108px; font-weight: 700; line-height: 1; color: rgba(255,255,255,.1);
  pointer-events: none; user-select: none;
}
.partners-block__icon {
  position: relative; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.partners-block h3 { position: relative; color: #fff; font-size: 16.5px; margin-bottom: 6px; }
.partners-block p { position: relative; color: rgba(255,255,255,.82); font-size: 12.5px; line-height: 1.5; margin: 0 0 18px; max-width: 90%; }
.partners-block__cta {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; color: var(--accent-dark); border-radius: 999px;
  padding: 12px 18px; font-size: 13.5px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.partners-block__cta:hover { background: #FFF1EE; color: var(--accent-dark); }
.partners-block__cta svg { flex-shrink: 0; }

/* Dernières vidéos YouTube (sidebar) */
.videos-block {
  position: relative; overflow: hidden; border-radius: 18px; padding: 24px;
  background: linear-gradient(135deg, #FFF8EE 0%, #FBECD3 100%);
  border: 1px solid rgba(228,169,61,.22);
  box-shadow: 0 10px 26px rgba(180,130,20,.10);
  display: none; flex-direction: column;
}
.videos-block__badge {
  position: absolute; top: -14px; right: -8px; font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 92px; font-weight: 700; line-height: 1; color: rgba(228,169,61,.16);
  pointer-events: none; user-select: none;
}
.videos-block__icon {
  position: relative; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--amber) 0%, #C97F1F 100%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; box-shadow: 0 6px 14px rgba(228,169,61,.35);
}
.videos-block h3 { position: relative; font-size: 16.5px; margin-bottom: 2px; color: var(--text); }
.videos-block .sub { position: relative; font-size: 12px; color: var(--muted); display: block; margin-bottom: 16px; }
.videos-block-list { position: relative; display: flex; flex-direction: column; gap: 12px; }
.videos-block-row {
  display: flex; flex-direction: column; gap: 7px;
  background: #fff; border-radius: 12px; padding: 8px;
  box-shadow: 0 4px 10px rgba(15,33,59,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.videos-block-row:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(15,33,59,.14); }
.videos-block-row .thumb {
  position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--navy-2);
}
.videos-block-row .thumb .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.videos-block-row .thumb .play span {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(220,63,48,.92);
  display: flex; align-items: center; justify-content: center;
}
.videos-block-row strong { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--text); padding: 0 2px 2px; display: block; }

/* Emplacement publicitaire */
.ads-block {
  background: #fff; border: 1px dashed var(--border); border-radius: 18px;
  padding: 22px; text-align: center; color: var(--muted-2); font-size: 12.5px;
  min-height: 200px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.ads-block__label { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }

/* Grille de la page d'accueil : ordre naturel en mobile/tablette,
   colonnes main + sidebar (chacune un simple empilement vertical)
   à partir du desktop — pas de grille avec zones à cheval sur
   plusieurs lignes, pour que les cartes de la colonne de droite
   restent toujours collées les unes sous les autres quelle que
   soit la hauteur du contenu de la colonne principale. */
.home-grid { display: flex; flex-direction: column; gap: 40px; }
.home-main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.home-side { display: flex; flex-direction: column; gap: 16px; }

@media (min-width: 768px) {
  .partners-block { display: block; }
}

@media (min-width: 1024px) {
  .menu-toggle { display: none; }

  .videos-block, .ads-block { display: flex; }

  .home-grid {
    flex-direction: row;
    align-items: flex-start;
  }
  .home-main { flex: 1; }
  .home-side { width: 320px; flex-shrink: 0; }
}

/* ===== "À la une" : flux unifié Actus/Tests/Guides (pagination par numéros) ===== */
.home-feed { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.home-feed-list { padding: 0 22px; transition: opacity .15s ease; }
.home-feed-item { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.home-feed-list .home-feed-item:last-child { border-bottom: none; }
.home-feed-item__thumb { width: 150px; height: 150px; border-radius: 10px; flex-shrink: 0; background-size: cover; background-position: center; background-color: var(--navy-2); }
.home-feed-item__body { min-width: 0; }
.home-feed-item__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.home-feed-item__date { font-size: 11.5px; color: var(--muted-2); }
.home-feed-item h3 { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; margin: 0 0 6px; }
.home-feed-item p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
  .home-feed-item__thumb { width: 96px; height: 96px; }
}

/* Pagination du flux "À la une" : bulles numérotées + flèches de chaque côté */
.home-feed-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 22px 22px; }
.home-feed-pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.home-feed-page-btn { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--border); color: var(--muted); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.home-feed-page-btn:hover { background: var(--bg); }
.home-feed-page-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.home-feed-pg-arrow { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; }
.home-feed-pg-arrow:hover { background: var(--bg); }
.home-feed-pg-arrow:disabled { opacity: .4; cursor: default; }
.home-feed-pg-arrow:disabled:hover { background: #fff; }

/* ===== En-tête de section avec flèches (Derniers tests / Guides & DIY) ===== */
.carousel-head-actions { display: flex; align-items: center; gap: 14px; }
.carousel-arrows { display: flex; gap: 8px; }
.carousel-arrow-btn { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.carousel-arrow-btn:hover { background: var(--bg); }
.carousel-track { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track .card { flex: 0 0 230px; display: flex; flex-direction: column; }
.carousel-track .post-card-img { aspect-ratio: 4/3; }
@media (max-width: 640px) {
  .carousel-arrow-btn { display: none; }
  .carousel-track .card { flex-basis: 210px; }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .hero-inner, .grid-3, .grid-4, .test-body, .pros-cons { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .wrap { padding: 0 20px; }

  .site-header { padding: 0 20px; }
  .site-header .brand-tagline { display: none; }
  .site-header .brand-name { font-size: 15.5px; }
  .site-header .brand img { width: 36px; height: 36px; }
  .site-header .btn { padding: 10px 16px; font-size: 13.5px; }
  .site-header .btn svg { width: 14px; height: 14px; }
  .menu-toggle { display: flex; }

  .hero { padding: 40px 20px 56px; }
  .hero h1 { font-size: 30px; }
  .hero p.lede { max-width: 100%; font-size: 15.5px; }

  .stats-bar__inner { padding: 12px 20px; }

  .video-section { padding: 40px 20px; }

  .newsletter { padding: 28px 24px; }
  .newsletter form { min-width: 0; width: 100%; }

  .breadcrumb, .article-header, .affiliate-disclosure, .test-hero-img, .test-body {
    padding-left: 20px; padding-right: 20px;
  }
  .article-header h1 { font-size: 26px; }

  .wp-block-table th, .wp-block-table td, .wrap table th, .wrap table td { padding: 9px 10px; font-size: 13px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 25px; }
  .hero p.lede { font-size: 14.5px; }
  .btn { padding: 11px 18px; font-size: 13.5px; }
  .stats-bar .stat .num { font-size: 15.5px; }
  .stats-bar .stat .lbl { font-size: 10.5px; }
  .newsletter form { flex-direction: column; }
  .bottom-cta { flex-direction: column; align-items: flex-start; }
}


/* =========================================================
   Page Partenaires (façon "Boutiques / codes promo")
   ========================================================= */
.partners-page-intro { max-width: 720px; }
.partners-page-intro p { font-size: 15.5px; line-height: 1.75; color: #33404F; }

.partners-section { margin-top: 40px; }
.partners-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 18px;
}
.partners-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
.partner-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.partner-tile:hover { box-shadow: 0 10px 24px rgba(16,24,38,.08); transform: translateY(-3px); }
.partner-tile__logo {
  background: var(--bg);
  padding: 28px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  border-bottom: 1px solid var(--border);
}
.partner-tile__logo-badge {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px;
}
.partner-tile__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.partner-tile__name { font-size: 15.5px; font-weight: 700; color: var(--text); }
.partner-tile__offer { font-size: 14px; color: #33404F; line-height: 1.5; margin: 0; }
.partner-tile__code {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  background: var(--bg);
  border: 1px dashed var(--muted-2);
  border-radius: 999px;
  padding: 5px 8px 5px 12px;
  font-size: 12.5px;
}
.partner-tile__code .code-lbl { font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; }
.partner-tile__code .code-val { font-family: 'Space Grotesk', monospace; font-weight: 700; color: var(--navy); }
.partner-tile__code button {
  border: none; background: #fff; border-radius: 999px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); box-shadow: 0 1px 2px rgba(16,24,38,.12);
}
.partner-tile__code button:hover { color: var(--accent); }
.partner-tile__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--accent);
  text-decoration: none; padding-top: 4px;
}
.partner-tile__cta:hover { color: var(--accent-dark); }
.partner-tile__cta svg { transition: transform .15s ease; }
.partner-tile__cta:hover svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .partners-tiles { grid-template-columns: 1fr; }
}