/* ============================================================================
   lebancdessai.fr — feuille de style unique.
   Design décliné des maquettes validées (docs/lebancdessai-maquettes) et de
   la charte de la chaîne (studio/style-sheets/banc-dessai.md).
   Mobile-first : la base cible 390px, les media queries élargissent.
   ========================================================================= */

/* ---- Fontes auto-hébergées (variables, sous-ensemble latin) ---- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/inter-tight-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-var-latin.woff2") format("woff2");
}

/* ---- Tokens ---- */
:root {
  --void: #06070a;
  --bg: #0b0d11;
  --surface: #141821;
  --surface-hi: #1c222d;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --line-hard: rgba(255, 255, 255, 0.3);
  --text: #ffffff;
  --text-soft: #d7dde7;
  --text-dim: #8a93a3;
  --text-faint: #767e8e;
  --sep: #4a5261;
  --accent: #ff4d1c;
  --accent-hover: #ff6a3d;
  --accent-soft: rgba(255, 77, 28, 0.12);
  --accent-border: rgba(255, 77, 28, 0.45);
  --pos: #2fd97a;
  --pos-soft: rgba(47, 217, 122, 0.1);
  --pos-border: rgba(47, 217, 122, 0.4);
  --neg: #ff3b52;
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --body: "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --pad: 16px;
  --radius: 14px;
}

/* ---- Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection {
  background: var(--accent);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

.wrap {
  padding-left: var(--pad);
  padding-right: var(--pad);
  margin: 0 auto;
  max-width: 1440px;
}

/* Typo utilitaires */
.mono {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.16em;
}
.kicker {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--accent);
  text-transform: uppercase;
}
.tnum {
  font-variant-numeric: tabular-nums;
}

/* En-tête de section : kicker + barre + titre */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.sec-head .bar {
  width: 44px;
  height: 3px;
  background: var(--accent);
}
.sec-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.05;
}
.sec-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 22px;
}
.sec-row .sec-head {
  margin-bottom: 0;
}
.sec-link {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  white-space: nowrap;
  padding-bottom: 4px;
}
.sec-link:hover {
  color: var(--accent);
}

/* ============================ MICROBAR + HEADER ========================== */
.microbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  min-height: 26px;
  padding: 4px 12px;
  background: var(--void);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-align: center;
}
/* Mobile : seule la mention d'affiliation reste visible (conformité,
   comme la maquette MProduit) ; le slogan revient en desktop. */
.microbar .m1 {
  display: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 13, 17, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
}
.brand svg {
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand-name em {
  font-style: normal;
  color: var(--accent);
}
.nav-desktop {
  display: none;
}
.header-search {
  display: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-soft);
}
.chain-btn {
  display: none;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  white-space: nowrap;
}
.chain-btn:hover {
  border-color: var(--accent-border);
}

/* Tiroir mobile */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}
.drawer.open {
  display: block;
}
.drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 10, 0.72);
}
.drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: var(--bg);
  border-right: 1px solid var(--line-strong);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.drawer-panel .brand {
  margin-bottom: 14px;
}
.drawer-link {
  display: block;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-soft);
}
.drawer-link.sub {
  padding-left: 18px;
  color: var(--text-dim);
  letter-spacing: 0.16em;
  font-size: 10px;
}
.drawer-link:hover {
  color: var(--accent);
}
.drawer-close {
  align-self: flex-end;
  color: var(--text-dim);
  padding: 8px;
}

/* Recherche (overlay simple) */
.search-pop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  display: none;
  padding: 14px var(--pad);
  background: var(--void);
  border-bottom: 1px solid var(--line-strong);
}
.search-pop.open {
  display: flex;
  gap: 10px;
}
.search-pop input {
  flex: 1;
  height: 46px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.search-pop input::placeholder {
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* ============================ BOUTONS / CHIPS ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 77, 28, 0.3);
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 30px rgba(255, 77, 28, 0.45);
}
.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
}
.btn-ghost:hover {
  border-color: var(--line-hard);
  color: var(--text);
}
.btn-merchant {
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
}
.btn-merchant.secondary {
  border: 1px solid var(--line-hard);
  color: var(--text-soft);
}
.btn-merchant.secondary:hover {
  border-color: var(--accent-border);
  color: var(--text);
}
.btn-block {
  width: 100%;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  white-space: nowrap;
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.tag-accent {
  background: var(--accent);
  color: #fff;
}
.tag-accent-soft {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
}
.tag-pos {
  background: var(--pos-soft);
  border: 1px solid var(--pos-border);
  color: var(--pos);
}
.tag-neutral {
  background: var(--surface-hi);
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
}
.tag-dark {
  background: rgba(6, 7, 10, 0.85);
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
}

/* ============================ BREADCRUMB ================================ */
.crumbs {
  padding: 18px 0 14px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs li + li::before {
  content: "/";
  color: var(--sep);
  margin-right: 6px;
}
.crumbs a:hover {
  color: var(--text-soft);
}
.crumbs [aria-current] {
  color: var(--accent);
}

/* ============================ HERO ====================================== */
.hero {
  position: relative;
  padding: 40px 0 36px;
  background: radial-gradient(ellipse 380px 260px at 50% 0%, rgba(215, 221, 231, 0.07), transparent 70%), var(--bg);
  overflow: hidden;
}
.hero-rules {
  display: none;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--accent);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fff;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 11vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero-sub {
  font-size: 15px;
  color: var(--text-soft);
  max-width: 560px;
}
.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  align-items: center;
}
.hero-ctas .btn-primary {
  width: 100%;
  min-height: 52px;
}
.hero-stats {
  display: flex;
  width: 100%;
  gap: 18px;
  margin-top: 8px;
}
.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 2px solid var(--line-strong);
  padding-top: 9px;
}
.stat:first-child {
  border-top-color: var(--accent);
}
.stat b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

/* Carte à la une */
.featured {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.featured-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}
.featured-top .date {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}

/* ============================ CATEGORIES (accueil) ====================== */
.cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 108px;
}
.cat-card.active {
  border-color: var(--accent-border);
  box-shadow: 0 0 26px rgba(255, 77, 28, 0.1);
}
.cat-card.active:hover {
  background: var(--surface-hi);
}
.cat-card .cat-count {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.cat-card .cat-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.cat-card .cat-soon {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.cat-card.soon {
  opacity: 0.62;
}
.cat-card .go {
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: var(--accent);
}

/* ============================ CARTE PRODUIT ============================= */
.pcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pcard:hover {
  border-color: var(--line-hard);
  transform: translateY(-2px);
}
.pcard.top {
  border-color: rgba(255, 77, 28, 0.5);
  box-shadow: 0 0 26px rgba(255, 77, 28, 0.12);
}
.pcard-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.pcard-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.pcard-img {
  aspect-ratio: 4 / 3;
  background: var(--surface-hi);
}
.pcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pcard-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 14px;
  flex: 1;
}
.pcard-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}
.pcard-brand {
  font-family: var(--mono);
  /* 8 px en gris pâle, la marque ne se lisait pas : la carte semblait n'afficher
     que le modèle. Remontée à 11 px dans la couleur du texte le 04/09/2026. */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text);
  opacity: 0.85;
}
.pcard-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.pnote {
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}
.pnote b {
  font-family: var(--display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pnote span {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
}
.pcard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pcard-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  margin-top: auto;
}
.pcard-actions {
  display: flex;
  gap: 8px;
}
.pcard-actions .btn {
  min-height: 44px;
  padding: 0 14px;
  flex-grow: 1;
}
.pcard-actions .btn-ghost {
  flex-grow: 0;
}
/* Cartes étroites (grille 2 col. mobile) : un seul bouton, la carte entière
   mène déjà au test via l'image et le nom ; le badge descend en bas de
   l'image pour ne pas chevaucher le rang. */
@media (max-width: 519px) {
  .pcards .pcard-actions .btn-ghost {
    display: none;
  }
  .pcards .pcard-badge {
    top: auto;
    right: auto;
    bottom: 10px;
    left: 10px;
  }
}

/* Cartes podium / à la une : variante plus riche */
.pcard.wide .pcard-body {
  padding: 16px;
  gap: 12px;
}
.pcard.wide .pcard-name {
  font-size: 20px;
}
.pcard.wide .pnote b {
  font-size: 38px;
}
.pcard.wide .pcard-price {
  font-size: 16px;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.price-row .lbl {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}
.price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.price-box .lbl {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.price-box b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}

.podium {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Rail horizontal (derniers passages mobile) */
.rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--pad) 6px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar {
  display: none;
}
.rail > * {
  flex-shrink: 0;
  width: 240px;
  scroll-snap-align: start;
}
.vcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vcard:hover {
  border-color: var(--line-hard);
}
.vcard-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-hi);
}
.vcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vcard-media .veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 10, 0.25);
}
.play-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255, 77, 28, 0.5);
}
.vcard-media .dur {
  position: absolute;
  bottom: 8px;
  right: 8px;
}
.vcard-media .flag {
  position: absolute;
  top: 8px;
  left: 8px;
}
.vcard-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px 16px;
}
.vcard-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}
.vcard-meta .note {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 9px;
}
.vcard-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

/* ============================ MÉTHODE =================================== */
.method {
  background: var(--void);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.method-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.method-item {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--line-strong);
  padding-top: 16px;
}
.method-item .num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.method-item h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.method-item p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* ============================ FICHE PRODUIT ============================= */
/* Ordre mobile (maquette validée) : galerie → titre/note/achat → aimé/regretté.
   En desktop : grille 2 colonnes, aimé/regretté sous la galerie. */
.product-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.product-media {
  order: 1;
}
.product-side {
  order: 2;
}
.product-under {
  order: 3;
}
.gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gallery-main {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
/* L'image garde SA proportion : `aspect-ratio: 4/3` + `cover` recadrait tout au
   même format et coupait les packshots carrés du flux partenaire (03/09/2026).
   Les attributs width/height de l'<img> donnent le ratio, `max-height` évite
   qu'un carré n'occupe tout l'écran, `contain` gère le cas où il l'atteint. */
.gallery-main img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
}
.gallery-stamp {
  position: absolute;
  top: 12px;
  left: 12px;
}
.thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 760px) {
  .thumbs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }
}
.thumb {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  opacity: 0.7;
  padding: 0;
  transition: opacity 0.12s ease, border-color 0.12s ease;
}
.thumb img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--void);
  width: 100%;
}
.thumb[aria-current="true"] {
  border: 2px solid var(--accent);
  opacity: 1;
}
.thumb:hover {
  opacity: 1;
}

.ptitle {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
}
.ptitle-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ptitle-brand {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}
.ptitle h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.035em;
}
.ptitle .accroche {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dim);
}

.note-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.note-card .big {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.note-card .big b {
  font-family: var(--display);
  font-weight: 900;
  font-size: 68px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.note-card .big span {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
}
.note-card .side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.note-card .lbl {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

.avis-ext {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}
.avis-ext b {
  color: var(--text-soft);
}

/* Barres critères */
.criteria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  padding-top: 22px;
}
.crit {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.crit-line {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-weight: 700;
}
.crit-line .l {
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.crit-line .v {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.crit-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
}
.crit-bar i {
  display: block;
  height: 4px;
  background: var(--accent);
}

/* Panneau prix + marchands */
.buy-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
  padding: 20px;
  background: var(--surface-hi);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.buy-panel .lbl {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}
.buy-panel .price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.buy-panel .releve {
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}
.buy-panel .merchants {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.buy-panel .note-affil {
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-faint);
}

/* Aimé / regretté */
.pmlists {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 30px;
}
.pmcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pmcard .lbl {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.pmcard.plus .lbl {
  color: var(--pos);
}
.pmcard.moins .lbl {
  color: var(--neg);
}
.pmcard li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-soft);
}
.pmcard li svg {
  flex-shrink: 0;
  margin-top: 3px;
}

/* Sections pleine largeur de la fiche */
/* Padding VERTICAL seulement. Le raccourci `padding: 32px 0 0` remettait les
   paddings horizontaux à zéro et écrasait donc ceux de `.wrap` sur les six
   blocs `wrap psection` de chaque fiche : 48 px de gouttière perdus en
   desktop, 16 px en mobile — le corps de texte touchait le bord de l'écran.
   Défaut présent depuis le lancement, corrigé le 02/09/2026. Pour revenir en
   arrière : remettre `padding: 32px 0 0`. */
.psection {
  padding-top: 32px;
  padding-bottom: 0;
}
.psection-dark {
  margin-top: 30px;
  background: var(--void);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
}

/* Vidéo (façade cliquable, iframe injectée au clic) */
/* GARDE-FOU : la hauteur du lecteur venait UNIQUEMENT de son `.poster`. Un
   gabarit qui oubliait l'affiche produisait un bloc de 0 px, donc une vidéo
   invisible sans la moindre erreur (cas des pages de gamme, 23/08 → 03/09/2026).
   Le ratio est désormais porté par le conteneur lui-même : même sans affiche,
   le lecteur occupe sa place. */
.video-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.video-shell .poster {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.video-shell .veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 10, 0.3);
  width: 100%;
  cursor: pointer;
}
.video-shell .play-disc {
  width: 60px;
  height: 60px;
  box-shadow: 0 0 30px rgba(255, 77, 28, 0.55);
}
.video-shell .yt-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(6, 7, 10, 0.85);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-soft);
}
.video-shell .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: 30px 12px 12px;
  background: linear-gradient(to top, rgba(6, 7, 10, 0.92), transparent);
  pointer-events: none;
}
.video-shell .caption .t {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}
.video-shell iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.video-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}

/* Fiche technique */
.specs {
  display: flex;
  flex-direction: column;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.spec-row .l {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.spec-row .v {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.spec-row .v small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
}

/* Corps éditorial (flagship) */
.article {
  max-width: 720px;
}
.article .kicker {
  margin-top: 34px;
}
.article h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
  margin: 10px 0 4px;
}
.article h2 + p,
.article p + p {
  margin-top: 14px;
}
.article p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-soft);
}
.article .bar {
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin-top: 8px;
}
.points-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.points-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.points-list li svg {
  flex-shrink: 0;
  margin-top: 4px;
}
.points-list b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.points-list p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
  margin-top: 3px;
}
.callout {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}
.callout.verdict {
  border-left-color: var(--pos);
}
.callout .t {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}
.callout.verdict .t {
  color: var(--pos);
}
.callout p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* Pour qui / pas pour qui */
.profil-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .ic {
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}
.faq details[open] summary .ic {
  transform: rotate(180deg);
  color: var(--accent);
}
.faq .a {
  padding: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 720px;
}

/* Alternatives */
.alts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.alt-card {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.alt-card:hover {
  border-color: var(--line-hard);
}
.alt-card img {
  width: 116px;
  flex-shrink: 0;
  object-fit: cover;
}
.alt-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  justify-content: center;
}
.alt-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.alt-head b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.alt-head .n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.alt-body .why {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}
.alt-body .p {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}

/* Barre d'achat collante (mobile) */
.sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 8px));
  background: rgba(11, 13, 17, 0.97);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.5);
  transform: translateY(110%);
  transition: transform 0.22s ease;
}
.sticky-buy.show {
  transform: translateY(0);
}
.sticky-buy .info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sticky-buy .l {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-buy .p {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sticky-buy .btn {
  flex: 1;
  min-height: 50px;
}

/* ============================ LISTING / FILTRES ========================= */
.listing-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.listing-head h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 8vw, 54px);
  line-height: 1;
  letter-spacing: -0.035em;
}
.listing-count {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.listing-count b {
  color: var(--text);
  font-weight: 700;
}
.listing-intro {
  padding: 16px 0 0;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.listing-intro p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}
.listing-intro p:first-child {
  color: var(--text-soft);
  font-size: 15px;
}

/* Barre mobile filtres/tri */
.toolbar {
  position: sticky;
  top: 60px;
  z-index: 40;
  display: flex;
  gap: 10px;
  padding: 10px 0;
  background: linear-gradient(var(--bg) 82%, transparent);
}
.toolbar .tb-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-soft);
}
.toolbar select {
  flex: 1;
  height: 46px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  appearance: none;
}

/* Puces filtres actifs */
.active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 4px;
  min-height: 10px;
}
.active-filters .af-lbl {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-faint);
}
.af-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.af-clear {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Panneau filtres : bottom-sheet mobile, sidebar desktop */
.filters-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(6, 7, 10, 0.72);
  display: none;
}
.filters-scrim.open {
  display: block;
}
.filters {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  max-height: 84dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-top: 1px solid var(--line-strong);
  border-radius: 16px 16px 0 0;
  transform: translateY(105%);
  transition: transform 0.25s ease;
}
.filters.open {
  transform: translateY(0);
}
.filters-grip {
  align-self: center;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-hard);
  margin: 10px 0 2px;
}
.filters-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px var(--pad) 12px;
  border-bottom: 1px solid var(--line);
}
.filters-head .t {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.filters-body {
  overflow-y: auto;
  padding: 0 var(--pad);
}
.fgroup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.fgroup > .t {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.fcheck {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.fcheck input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fcheck .box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-hard);
  border-radius: 2px;
  color: transparent;
  flex-shrink: 0;
}
.fcheck input:checked + .box {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fcheck input:focus-visible + .box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fcheck .lbl {
  flex: 1;
  font-size: 15px;
  color: var(--text-soft);
}
.fcheck .count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-faint);
}
.fchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fchip {
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.fchip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: rgba(255, 77, 28, 0.55);
  color: var(--accent);
}
.frange {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.frange .track {
  position: relative;
  height: 26px;
}
.frange input[type="range"] {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  height: 26px;
}
.frange input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  background: var(--surface-hi);
  border: 2px solid #fff;
  border-radius: 3px;
  cursor: grab;
}
.frange input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  background: var(--surface-hi);
  border: 2px solid #fff;
  border-radius: 3px;
  cursor: grab;
}
.frange .rail-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
}
.frange .rail-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--accent);
}
.frange .ticks {
  height: 6px;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 13px);
}
.frange .vals {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.freset {
  padding: 20px 0;
}
.filters-apply {
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 8px));
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.listing-note {
  text-align: center;
  padding: 18px 0 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  line-height: 1.7;
}
.no-results {
  display: none;
  padding: 40px 0;
  text-align: center;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* Liens croisés sous-catégories */
.crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 26px 0 0;
}
.crosslinks .t {
  width: 100%;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.crosslink {
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-soft);
}
.crosslink:hover {
  border-color: var(--accent-border);
  color: var(--accent);
}
.crosslink[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* ============================ YOUTUBE / ARTICLES ======================== */
.btn-youtube {
  background: #ff0000;
  color: #fff;
  gap: 10px;
  box-shadow: 0 0 22px rgba(255, 0, 0, 0.28);
}
.btn-youtube:hover {
  background: #e60000;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.4);
}
.btn-youtube.outline {
  background: none;
  border: 1px solid rgba(255, 0, 0, 0.65);
  color: #fff;
  box-shadow: none;
}
.btn-youtube.outline:hover {
  background: rgba(255, 0, 0, 0.12);
}
.btn-youtube svg path {
  fill: #fff;
}
.yt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
}
.yt-band {
  background: var(--void);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.yt-band .inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 34px 0;
}
.yt-band .t {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.03em;
}
.yt-band p {
  font-size: 14px;
  color: var(--text-dim);
  max-width: 560px;
}
@media (min-width: 760px) {
  .yt-band .inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
}

.article-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 0 22px;
  max-width: 860px;
}
.article-head h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 7.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.article-head .accroche {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-dim);
}
.article-hero {
  max-width: 860px;
  padding-bottom: 10px;
}
.article-hero .yt-actions {
  padding-top: 14px;
}

.schema,
.photo {
  margin: 26px 0 6px;
  max-width: 760px;
}
.schema svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-sizing: border-box;
}
.photo img {
  border-radius: 12px;
  border: 1px solid var(--line);
}
.schema figcaption,
.photo figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.vcard-sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}
.logo-img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  flex-shrink: 0;
}
@media (min-width: 1060px) {
  .logo-img {
    width: 40px;
    height: 40px;
  }
}

/* ============================ LIENS DANS LE TEXTE ======================= */
/* Demande utilisateur : les liens du contenu doivent se VOIR (soulignés). */
.article p a,
.article .points-list a,
.article .callout a,
.faq .a a,
.listing-intro a,
.prose p a,
.prose li a,
.w-verdict a,
.widget-sub a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 77, 28, 0.55);
}
.article p a:hover,
.faq .a a:hover,
.listing-intro a:hover,
.prose a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}

/* ============================ OUTILS DU BANC (widgets) ================== */
.widget {
  margin: 30px 0 8px;
  max-width: 760px;
  background: var(--void);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.widget-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 0;
}
.widget-head .bar {
  width: 40px;
  height: 3px;
  background: var(--accent);
}
.widget-head h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
}
.widget-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.widget-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.w-progress {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-faint);
}
.w-question {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}
.w-choix {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.w-choice {
  text-align: left;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-soft);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.w-choice:hover {
  border-color: var(--line-hard);
}
.w-choice.bonne {
  border-color: var(--pos-border);
  background: var(--pos-soft);
  color: var(--text);
}
.w-choice.mauvaise {
  border-color: rgba(255, 59, 82, 0.5);
  background: rgba(255, 59, 82, 0.1);
}
.w-choice:disabled {
  cursor: default;
}
.w-explication {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  border-left: 3px solid var(--accent);
  padding: 8px 0 8px 12px;
}
.w-suivant {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.w-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.w-score b {
  font-family: var(--display);
  font-weight: 900;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.w-score span {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
}
.w-crit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.w-crit-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-weight: 700;
}
.w-crit-line .l {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.w-crit-line .v {
  font-size: 12px;
  color: var(--text-soft);
}
.w-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.w-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.35s ease;
}
.w-verdict {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.w-verdict.ok {
  border-color: var(--pos-border);
  background: var(--pos-soft);
}
.w-verdict.ko {
  border-color: rgba(255, 59, 82, 0.5);
  background: rgba(255, 59, 82, 0.08);
}
.w-btn {
  align-self: flex-start;
}
.w-check {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.w-check .lbl b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.w-check .lbl small {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}
.w-check input:checked ~ .lbl b {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: var(--pos);
}
.w-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.w-field .l {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.w-field .l b {
  color: var(--accent);
  font-size: 12px;
}
.w-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
}
.w-range::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.w-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 4px;
  background: var(--accent);
  border: 2px solid #fff;
  cursor: grab;
}
.w-range::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.w-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--accent);
  border: 2px solid #fff;
  cursor: grab;
}
.w-select {
  height: 48px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.w-lignes {
  display: flex;
  flex-direction: column;
}
.w-lignes > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-dim);
}
.w-lignes b {
  color: var(--text-soft);
  font-weight: 600;
  white-space: nowrap;
}
.w-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
}
.w-total .l {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.w-total b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}
/* Précision en clair dans le libellé d'une ligne de simulateur (02/09/2026). */
.w-lignes small {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
}
/* Variante « verdict » du total : la valeur est une phrase, pas un montant,
   donc elle passe sous le libellé et ne cherche jamais à tenir sur une ligne. */
.w-total.verdict {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.w-total.verdict b {
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
/* ---------------------------------------------------------------------------
   TEST « QUEL INTERCOM EST FAIT POUR VOUS » (03/09/2026) : podium de trois
   modèles issus du catalogue réel, avec les raisons du classement.
   --------------------------------------------------------------------------- */
.w-podium {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-bottom: 14px;
}
@media (min-width: 700px) {
  .w-podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}
.w-pod {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.w-pod:hover {
  border-color: var(--line-hard);
  transform: translateY(-2px);
}
.w-pod.top {
  border-color: rgba(255, 77, 28, 0.5);
  box-shadow: 0 0 26px rgba(255, 77, 28, 0.12);
}
.w-pod img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  background: var(--void);
}
.w-pod-rang {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}
.w-pod.top .w-pod-rang {
  color: var(--accent);
}
.w-pod-nom {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.w-pod-meta {
  font-size: 12px;
  color: var(--text-dim);
}
.w-pod-meta b {
  font-size: 15px;
  color: var(--text);
}
.w-pod-raisons {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 2px;
}
.w-retour {
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: var(--text-faint);
  cursor: pointer;
}
.w-retour:hover {
  color: var(--text-soft);
}

/* ENCADRÉ PACK DUO (03/09/2026) : sous le panneau d'achat de la fiche, pour le
   même modèle vendu par deux chez le partenaire. Volontairement plus sobre que
   le panneau principal, il ne doit pas lui voler la vedette. */
.duo-box {
  margin-top: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
.duo-box .t {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 8px;
}
.duo-box p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 12px;
}
.duo-prix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.duo-prix b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.duo-prix s {
  font-size: 14px;
  color: var(--text-faint);
}
.duo-date {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.w-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint);
}
.w-resultat {
  font-size: 14px;
}
.w-duel-tetes {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.w-duel-tetes .mono {
  font-size: 10px;
  color: var(--accent);
}
.w-duel-tetes span:last-child {
  text-align: right;
}
.w-duel-ligne {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  transition: border-color 0.12s ease;
}
.w-duel-ligne:hover {
  border-color: var(--line-hard);
}
.w-duel-ligne .t {
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  text-align: center;
}
.w-duel-ligne .g,
.w-duel-ligne .d {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.w-duel-ligne .d {
  text-align: right;
}
.w-duel-ligne .win {
  color: var(--accent);
  font-weight: 800;
}
.w-duel-note {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

/* ============================ PAGES ÉDITO =============================== */
.prose {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}
.prose h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 8vw, 46px);
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.prose h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-top: 18px;
}
.prose p,
.prose li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-soft);
}
.prose ul {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prose a {
  color: var(--accent);
}
.prose a:hover {
  color: var(--accent-hover);
}

/* ============================ FOOTER ==================================== */
.site-footer {
  margin-top: 40px;
  background: var(--void);
  border-top: 1px solid var(--line);
  padding: 36px 0 28px;
}
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.fcol {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.fcol .t {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-faint);
}
.fcol a {
  font-size: 13px;
  color: var(--text-soft);
}
.fcol a:hover {
  color: var(--accent);
}
.footer-base {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 20px;
}
.footer-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 360px;
}
.footer-legal {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 760px;
}
.footer-copy {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}

/* Pied de page produit : marge pour la barre collante */
.has-sticky-buy {
  padding-bottom: 86px;
}

/* ============================ DESKTOP ≥ 760px =========================== */
@media (min-width: 760px) {
  :root {
    --pad: 32px;
  }
  .microbar {
    justify-content: space-between;
    min-height: 34px;
    padding: 4px var(--pad);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-align: left;
  }
  .microbar .m1 {
    display: inline;
  }
  .pcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
  .pmlists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .profil-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .alts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
  }
  .alt-card img {
    width: 170px;
  }
  .specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 56px;
  }
  .footer-grid {
    display: grid;
    /* marque + LE SITE + une colonne de gammes par catégorie (2) + LE BANC */
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 40px;
    padding-bottom: 36px;
  }
  .footer-cols {
    display: contents;
  }
  .footer-base {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }
  .hero-ctas {
    flex-direction: row;
    width: auto;
  }
  .hero-ctas .btn-primary {
    width: auto;
    padding: 0 30px;
  }
  .rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    overflow: visible;
    padding: 0;
  }
  .rail > * {
    width: auto;
  }
  .rail-dots {
    display: none;
  }
  .sec-title {
    font-size: 42px;
  }
  .sec-head .bar {
    width: 52px;
  }
}

/* ============================ DESKTOP ≥ 1060px ========================== */
@media (min-width: 1060px) {
  :root {
    --pad: 48px;
  }
  .site-header {
    height: 84px;
    gap: 40px;
    justify-content: flex-start;
  }
  .brand-name {
    font-size: 21px;
  }
  #nav-open,
  #search-open {
    display: none;
  }
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  .nav-desktop a {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--text-dim);
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
  }
  .nav-desktop a:hover {
    color: var(--text);
  }
  .nav-desktop a[aria-current] {
    color: var(--text);
    border-bottom-color: var(--accent);
  }
  .header-search {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .header-search form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 320px;
    height: 44px;
    padding: 0 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text-dim);
  }
  .header-search input {
    flex: 1;
    background: none;
    border: 0;
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    outline: none;
  }
  .header-search input::placeholder {
    color: var(--text-faint);
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .chain-btn {
    display: inline-flex;
  }

  .hero {
    padding: 72px 0 68px;
  }
  .hero-rules {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 16px);
  }
  .hero-rules.left {
    left: 46px;
  }
  .hero-rules.right {
    right: 46px;
  }
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 64px;
    align-items: center;
    padding: 0 48px;
  }
  .hero-copy {
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: flex-start;
  }
  .hero h1 {
    font-size: clamp(54px, 5.4vw, 78px);
  }
  .hero-sub {
    font-size: 19px;
  }
  .hero-badge {
    padding: 8px 16px;
    font-size: 10px;
  }
  .hero-stats {
    gap: 44px;
    margin-top: 18px;
  }
  .stat b {
    font-size: 27px;
  }
  .stat span {
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .pcards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Fiche produit : 2 colonnes (galerie+aimé/regretté | panneau) */
  .product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    grid-template-areas: "media side" "under side";
    gap: 0 56px;
    align-items: start;
  }
  .product-media {
    grid-area: media;
  }
  .product-under {
    grid-area: under;
  }
  .product-side {
    grid-area: side;
    position: sticky;
    top: 104px;
  }
  .ptitle {
    padding-top: 0;
  }
  .ptitle h1 {
    font-size: 50px;
  }
  .note-card .big b {
    font-size: 76px;
  }
  .buy-panel {
    padding: 26px 28px;
  }
  .buy-panel .price {
    font-size: 40px;
  }
  .sticky-buy {
    display: none;
  }
  .has-sticky-buy {
    padding-bottom: 0;
  }
  .pmlists {
    padding-top: 14px;
  }

  /* Listing : sidebar + grille */
  .listing-layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .toolbar {
    position: static;
    background: none;
    padding: 0;
  }
  .toolbar .tb-btn {
    display: none;
  }
  .toolbar select {
    flex: 0 0 auto;
    min-width: 230px;
    height: 48px;
  }
  .filters-scrim {
    display: none !important;
  }
  .filters {
    position: sticky;
    top: 104px;
    max-height: none;
    transform: none;
    background: none;
    border: 0;
    border-radius: 0;
    z-index: 1;
  }
  .filters-grip,
  .filters-head,
  .filters-apply {
    display: none;
  }
  .filters-body {
    overflow: visible;
    padding: 0;
  }
  .listing-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
  }
}

/* ============================ PAGE CONTACT ============================== */
.contact-card {
  margin: 22px 0 6px;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-card .cc-lbl {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.contact-card .cc-mail {
  display: block;
  margin-top: 8px;
  font-family: var(--display);
  font-weight: 900;
  /* Calibré pour que l'adresse tienne sur UNE ligne dès 320px : une adresse
     e-mail coupée en deux ne se lit plus. */
  font-size: clamp(18px, 5.3vw, 30px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
  overflow-wrap: anywhere;
}
.contact-card .cc-mail:hover {
  color: var(--accent);
}
.contact-card .cc-hint {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}
.cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cc-tags code {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 5px 11px;
}
.offers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 6px 0 4px;
}
.offer {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.offer .num {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.offer h3 {
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.offer p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}
@media (min-width: 720px) {
  .contact-card {
    padding: 28px 30px;
    align-items: flex-start;
  }
  /* Le CTA pleine largeur est un réflexe mobile : sur grand écran il s'étire
     jusqu'au ridicule, on le borne. */
  .contact-card .btn-block {
    width: auto;
    min-width: 320px;
    padding: 0 32px;
  }
  .offers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

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

/* Repli sans JavaScript de la façade vidéo : le lecteur n'étant injecté qu'au
   clic, un visiteur (ou un crawler) sans JS doit tout de même trouver la
   vidéo. Le balisage VideoObject déclare cette vidéo : elle doit être
   atteignable en toutes circonstances. */
.video-shell noscript {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}
.video-fallback {
  display: block;
  padding: 12px 16px;
  background: rgba(11, 13, 17, 0.9);
  color: #fff;
  font: 600 13px/1.3 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
.video-fallback:hover { text-decoration: underline; }

/* Panneau du test « quel intercom pour vous » (04/09/2026).
   Même mécanique que le tiroir mobile : un scrim, un panneau, Échap pour
   fermer. Le test vit DANS le panneau, monté par app.js comme n'importe quel
   widget : il n'y a pas de second moteur à maintenir. */
.testpop {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
}
.testpop.open {
  display: block;
}
.testpop-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 10, 0.78);
}
.testpop-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 22px;
}
.testpop-close {
  position: sticky;
  top: 0;
  float: right;
  margin: -6px -6px 0 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.testpop-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* Bandeau d'appel au test, sur les pages de classement. */
.testcta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 18px;
  background: var(--bg-soft, rgba(255, 255, 255, 0.02));
}
.testcta .t {
  font-family: var(--display);
  font-size: 19px;
  margin: 0 0 4px;
}
.testcta p {
  margin: 0;
  max-width: 58ch;
  color: var(--text-dim);
  font-size: 14px;
}

/* ============================================================================
   LECTURE LONGUE ET BLOCS DU CORPS (24/09/2026)
   Pages tirées des vidéos : l'essentiel, tableaux comparatifs, chiffres clés,
   étapes, frise, chapitres de la vidéo, Shorts, vidéo annexe, carte produit,
   citation, sommaire, barre de progression, encart auteur, hubs par thème.
   Mobile d'abord : tout se lit à 340 px, rien ne déborde de la page.
   ========================================================================= */

/* Les ancres du sommaire ne passent pas sous l'en-tête collant (60 px). */
.article h2[id],
.theme-bloc,
#guide {
  scroll-margin-top: 78px;
}

/* Grille article + sommaire latéral (desktop) */
.article-meta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.article-meta a {
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-grille {
  display: block;
}
.article-aside {
  display: none;
}
@media (min-width: 1100px) {
  .article-grille {
    display: grid;
    grid-template-columns: minmax(0, 720px) 260px;
    gap: 64px;
    align-items: start;
  }
  .article-aside {
    display: block;
    position: sticky;
    top: 84px;
    padding-top: 34px;
  }
  .sommaire-mobile {
    display: none;
  }
}
.sommaire-fixe {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid var(--line-strong);
  padding-left: 18px;
}
.sommaire-t,
.sommaire-duree {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.sommaire-duree {
  color: var(--text-faint);
}
.sommaire-fixe ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.sommaire-fixe a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-dim);
  transition: color 0.12s ease;
}
.sommaire-fixe a:hover,
.sommaire-fixe a[aria-current] {
  color: var(--text);
}
.sommaire-fixe a[aria-current] {
  box-shadow: -19px 0 0 -17px var(--accent);
}
.sommaire-mobile {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.sommaire-mobile summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 48px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
}
.sommaire-mobile summary::-webkit-details-marker {
  display: none;
}
.sommaire-mobile summary .ic {
  color: var(--text-dim);
  transition: transform 0.15s ease;
}
.sommaire-mobile[open] summary .ic {
  transform: rotate(180deg);
  color: var(--accent);
}
.sommaire-mobile ol {
  padding: 0 16px 14px 34px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sommaire-mobile li {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-faint);
}
.sommaire-mobile a {
  display: block;
  padding: 7px 0;
  color: var(--text-soft);
}

/* Barre de progression de lecture */
.lecture-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}
.lecture-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* L'essentiel en 30 secondes */
.essentiel {
  margin-top: 26px;
  padding: 18px 20px 20px;
  background: linear-gradient(135deg, rgba(255, 77, 28, 0.1), rgba(255, 77, 28, 0.02));
  border: 1px solid var(--accent-border);
  border-radius: 12px;
}
.essentiel-t {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.essentiel ul {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.essentiel li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.essentiel li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}

/* Tableau comparatif : défile en largeur DANS son cadre, jamais la page */
.tableau {
  margin: 26px 0 6px;
}
.tableau-t {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tableau-scroll {
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--void);
  -webkit-overflow-scrolling: touch;
}
.tableau-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Jusqu'à 3 colonnes, le tableau tient dans l'écran (la colonne gagnante,
   souvent la dernière, ne doit jamais être cachée à 360 px). Au-delà, il
   défile dans son cadre. */
.tableau table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.45;
}
.tableau table.large {
  min-width: 520px;
}
.tableau th,
.tableau td {
  padding: 11px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
}
.tableau thead th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text);
  background: var(--surface);
  text-transform: uppercase;
}
.tableau tbody th {
  color: var(--text);
  font-weight: 600;
  position: sticky;
  left: 0;
  background: var(--void);
  min-width: 96px;
}
@media (max-width: 419px) {
  .tableau th,
  .tableau td {
    padding: 10px 8px;
    font-size: 12.5px;
  }
}
.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td {
  border-bottom: 0;
}
.tableau .win {
  background: var(--accent-soft);
  color: var(--text);
}
.tableau thead th.win {
  color: var(--accent);
}
.tableau-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint);
}

/* Chiffres clés */
.chiffres {
  margin: 26px 0 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 620px) {
  .chiffres {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}
.chiffre {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.chiffre b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(24px, 6.4vw, 32px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.chiffre .l {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.chiffre small {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

/* Étapes numérotées et frise chronologique */
.bloc-t {
  margin-top: 26px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.etapes,
.chrono {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}
.etapes li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.etapes li:last-child {
  border-bottom: 0;
}
.etapes .n {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  padding-top: 2px;
}
.etapes b,
.chrono b {
  font-size: 15px;
  color: var(--text);
}
.etapes p,
.chrono p {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}
.chrono li {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  padding: 0 0 20px;
}
.chrono li::before {
  content: "";
  position: absolute;
  left: 80px;
  top: 6px;
  bottom: -6px;
  width: 1px;
  background: var(--line-strong);
}
.chrono li:last-child::before {
  display: none;
}
.chrono li > div {
  position: relative;
  padding-left: 16px;
}
.chrono li > div::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg);
}
.chrono .d {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
  padding-top: 1px;
}

/* Chapitres de la vidéo principale */
.chapitres {
  margin: 26px 0 6px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.chapitres-t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-soft);
}
.chapitres ol {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}
.chapitres button {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 6px;
  border-radius: 8px;
  text-align: left;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}
.chapitres button:hover {
  background: var(--surface-hi);
  color: var(--text);
}
.chapitres button:disabled {
  cursor: default;
  background: none;
}
.chapitres .tc {
  flex-shrink: 0;
  min-width: 48px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

/* Shorts de la chaîne : rail vertical 9:16, défilement horizontal au doigt */
.yt-shorts {
  margin: 30px 0 6px;
}
.yt-shorts-t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-soft);
}
.yt-shorts-rail {
  margin-top: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 44%);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
@media (min-width: 620px) {
  .yt-shorts-rail {
    grid-auto-columns: 200px;
  }
}
.short-item {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.short-shell {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.short-shell .poster,
.short-shell iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.short-shell .veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 10, 0.18);
  width: 100%;
  cursor: pointer;
}
.short-shell .play-disc {
  width: 46px;
  height: 46px;
}
.short-shell .yt-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  background: rgba(6, 7, 10, 0.85);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-soft);
}
.short-shell noscript {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.short-t {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Vidéo annexe (une autre vidéo de la chaîne, au fil du texte) */
.video-annexe {
  margin: 26px 0 6px;
}
.video-annexe figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Carte produit au fil du texte */
.pinline {
  margin: 26px 0 6px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
@media (min-width: 620px) {
  .pinline {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 18px;
  }
}
.pinline-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
}
.pinline-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pinline-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.pinline-note {
  font-size: 11px;
  letter-spacing: 0;
  color: var(--text-dim);
}
.pinline-note b {
  color: var(--pos);
  font-size: 15px;
}
.pinline-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.article .pinline-raison {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}
.pinline-prix {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
}
.pinline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.pinline-actions .btn {
  min-height: 42px;
  padding: 0 16px;
}
@media (max-width: 419px) {
  .pinline {
    grid-template-columns: 1fr;
  }
  .pinline-img {
    max-width: 140px;
  }
}

/* Citation */
.citation {
  margin: 28px 0 6px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
}
.article .citation p {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text);
}
.citation cite {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* Schéma conçu pour le mobile : ne s'étire pas en desktop */
.schema-etroit {
  max-width: 520px;
}

/* Encart auteur en fin d'article */
.auteur-box {
  margin-top: 36px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.auteur-t {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}
.article .auteur-box p {
  margin-top: 8px;
  font-size: 14px;
}
.auteur-box a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auteur-box .auteur-lien {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Hubs de rubrique rangés par thème */
.themes-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 22px;
}
.themes-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-soft);
}
.themes-nav a:hover {
  border-color: var(--accent-border);
  color: var(--text);
}
.themes-nav .tnum {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
}
.theme-bloc {
  padding-top: 38px;
}
.theme-intro {
  margin: -10px 0 16px;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* Guide long sous le classement d'une gamme */
.gamme-guide {
  padding-top: 20px;
}
/* Image de tête d'un article sans vidéo propre */
.article-visuel img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}

/* ==========================================================================
   EN-TÊTE À SEPT ENTRÉES (24/09/2026)
   Avec la rubrique ACTUS, le contenu de l'en-tête mesurait 1 497 px : la page
   défilait en largeur jusqu'à cette taille d'écran (1 421 px déjà avant ACTUS).
   Sous 1 280 px le menu passe dans le tiroir, sous 1 440 px la recherche se
   replie en icône. Une entrée de menu de plus demande de refaire la mesure.
   ========================================================================== */
@media (min-width: 1060px) {
  .site-header {
    gap: 28px;
  }
  .nav-desktop {
    gap: 22px;
    flex-shrink: 0;
  }
  .nav-desktop a {
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
  .header-search {
    min-width: 0;
  }
  .header-search form {
    width: 100%;
    max-width: 320px;
    min-width: 0;
  }
}
@media (min-width: 1060px) and (max-width: 1439px) {
  .header-search {
    display: none;
  }
  #search-open {
    display: flex;
  }
  .site-header .chain-btn {
    margin-left: auto;
  }
}
@media (min-width: 1060px) and (max-width: 1279px) {
  #nav-open {
    display: flex;
  }
  .nav-desktop {
    display: none;
  }
}

/* Texte lu par les lecteurs d'écran et les moteurs, masqué à l'œil : la marque
   dans le titre des cartes produit, déjà affichée juste au-dessus (24/09/2026,
   deux cartes titrées « Mini » sur /gps/). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accueil : classements par gamme sous les catégories (24/09/2026). */
.home-gammes {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.home-gammes-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.home-gammes-ligne .t {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-right: 4px;
}
.home-gammes .chip {
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  color: var(--text-soft);
  text-decoration: none;
}
.home-gammes .chip:hover {
  border-color: var(--accent-border);
  color: var(--text);
}

/* widgets/baskets-moto-marquage.css */
/* Décodeur du marquage EN 13634 (article /conseils/baskets-moto/, 24/09/2026). */
.widget[data-widget="baskets-moto-marquage"] .bm-grille {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.widget[data-widget="baskets-moto-marquage"] .bm-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.widget[data-widget="baskets-moto-marquage"] .bm-ligne .l {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.widget[data-widget="baskets-moto-marquage"] .fchip {
  min-width: 44px;
  min-height: 40px;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
}
.widget[data-widget="baskets-moto-marquage"] .w-lignes > div > span {
  min-width: 0;
}
.widget[data-widget="baskets-moto-marquage"] .w-lignes small {
  margin-top: 2px;
  line-height: 1.4;
}

/* widgets/moto-ce-qui-change-en-2027-ct.css */
/* Échéance du contrôle technique moto (24/09/2026). Réutilise les classes des
   outils du banc (.w-field, .w-select, .fchips, .w-total, .w-lignes,
   .w-verdict) ; seul le champ date est propre : pleine largeur, sélecteur
   natif sombre, et 16 px pour que Safari iOS ne zoome pas au toucher. */
.widget[data-widget="moto-ce-qui-change-en-2027-ct"] .cq27-date {
  width: 100%;
  min-width: 0;
  font-size: 16px;
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
}
.widget[data-widget="moto-ce-qui-change-en-2027-ct"] .w-lignes > div span {
  min-width: 0;
}
.widget[data-widget="moto-ce-qui-change-en-2027-ct"] .w-lignes b {
  white-space: normal;
  text-align: right;
}
.widget[data-widget="moto-ce-qui-change-en-2027-ct"] [data-resultat] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* .w-field impose display:flex, qui l'emporte sur l'attribut hidden. */
.widget[data-widget="moto-ce-qui-change-en-2027-ct"] [hidden] {
  display: none !important;
}

/* widgets/nouvelles-motos-2027-garage.css */
/* Décideur « Laquelle dans votre garage ? » (24/09/2026), article
   /actus/nouvelles-motos-2027/. Réutilise .w-choice, .w-crit, .w-verdict ;
   seuls le nom du résultat, la ligne de statut et la barre gagnante sont propres. */
.widget[data-widget="nouvelles-motos-2027-garage"] .nm27-nom {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.widget[data-widget="nouvelles-motos-2027-garage"] .nm27-statut {
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0;
}
.widget[data-widget="nouvelles-motos-2027-garage"] .nm27-barres {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.widget[data-widget="nouvelles-motos-2027-garage"] .w-crit .w-bar i {
  background: var(--line-hard);
}
.widget[data-widget="nouvelles-motos-2027-garage"] .w-crit.nm27-top .w-bar i {
  background: var(--accent);
}
.widget[data-widget="nouvelles-motos-2027-garage"] .w-crit.nm27-top .w-crit-line .l {
  color: var(--accent);
}

/* widgets/packtalk-decideur.css */
/* Décideur « Quel Packtalk pour moi ? » (24/09/2026). Réutilise les classes
   des outils du banc (.w-choice, .w-total, .w-crit, .w-verdict) ; seuls la
   liste des raisons, la barre gagnante et la rangée de boutons sont propres. */
.widget[data-widget="packtalk-decideur"] .pk-barres {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.widget[data-widget="packtalk-decideur"] .w-crit .w-bar i {
  background: var(--line-hard);
}
.widget[data-widget="packtalk-decideur"] .w-crit.pk-top .w-bar i {
  background: var(--accent);
}
.widget[data-widget="packtalk-decideur"] .w-crit.pk-top .w-crit-line .l {
  color: var(--accent);
}
.widget[data-widget="packtalk-decideur"] .pk-raisons {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.widget[data-widget="packtalk-decideur"] .pk-raisons li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}
.widget[data-widget="packtalk-decideur"] .pk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.widget[data-widget="packtalk-decideur"] .pk-actions .btn {
  flex: 1 1 200px;
  justify-content: center;
  text-align: center;
}
/* Couleurs des boutons forcées : un lien dans un conteneur .prose hérite de
   la couleur d'accent, ce qui rendrait le texte orange sur fond orange. */
.widget[data-widget="packtalk-decideur"] .pk-actions .btn-primary,
.widget[data-widget="packtalk-decideur"] .pk-actions .btn-primary:hover {
  color: #fff;
}
.widget[data-widget="packtalk-decideur"] .pk-actions .btn-ghost {
  color: var(--text-soft);
}