/* Shared article and accessibility refinements for the SEO update. */
.page-layout > *, .content-layout > * { min-width: 0; max-width: 100%; }
.prose { min-width: 0; overflow-wrap: break-word; }
.prose > section { padding: 0; margin: 32px 0; }
.affiliate-note, .review-evidence-note { font-size: .84rem; line-height: 1.65; color: var(--muted, #aab5c5); border-left: 2px solid var(--accent, #00d4a8); padding: 8px 14px; }
.sidebar-card h2 { font-size: .85rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.sidebar-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sidebar-card a { color: var(--muted, #aab5c5); text-decoration: none; font-size: .85rem; line-height: 1.55; }
.sidebar-card a:hover { color: var(--accent, #00d4a8); text-decoration: underline; }
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table th[scope="row"] { font-size: .85rem; letter-spacing: normal; text-transform: none; white-space: normal; }
.audit-faq { border: 1px solid var(--border, #283243); border-radius: 10px; margin: 12px 0; padding: 16px; }
.audit-faq summary { cursor: pointer; color: var(--white, #fff); font-weight: 600; line-height: 1.6; }
.audit-faq p { margin: 14px 0 0; }
.rank-card[hidden] { display: none !important; }
.vs-score { font-size: 1rem !important; line-height: 1.5; }
a:focus-visible, summary:focus-visible, button:focus-visible, select:focus-visible, .table-wrap:focus-visible { outline: 2px solid var(--accent, #00d4a8); outline-offset: 4px; }
@media (max-width: 640px) {
  .article-header h1, .prose h1 { overflow-wrap: anywhere; }
  .data-table { min-width: 540px; }
  .affiliate-note { font-size: .8rem; }
}

/* Accessibility findings from the live mobile Lighthouse audit. */
.method-num { opacity: 1; }
.footer-col .footer-title { font-family: var(--font); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--white); margin-bottom: 14px; }
main p a:not(.btn-primary):not(.btn-outline), main li a:not(.btn-primary):not(.btn-outline) { text-decoration: underline; text-underline-offset: .18em; }

/* Homepage hero illustration — ink editorial (FR/EN). */
.hero.hero-with-visual { max-width: 1400px; }
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(260px, .98fr);
  gap: clamp(12px, 2.4vw, 36px);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero.hero-with-visual .hero-copy h1 { max-width: none; font-size: clamp(1.9rem, 3vw, 3.15rem); }
.hero.hero-with-visual .hero-sub { max-width: 38rem; margin-bottom: 28px; }
.hero.hero-with-visual .hero-ctas { margin-bottom: 28px; }
.hero-visual { min-width: 0; margin: 0; overflow: visible; background: transparent; }
.hero-illustration {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
}
@media (max-width: 860px) {
  .hero-layout { grid-template-columns: 1fr; gap: 12px; }
  .hero-visual { order: 0; max-width: none; width: 100%; margin: 8px 0 0; }
}

/* Hand-drawn ink diagrams for educational guides. */
.ink-figure {
  container-type: inline-size;
  margin: 28px 0 12px;
  padding: 18px 16px 16px;
  background: #080c12;
  border: 1px solid rgba(243, 234, 215, .28);
  border-radius: 14px;
  min-width: 0;
}
.ink-title {
  margin: 0;
  color: #f3ead7;
  font-family: var(--font, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  font-weight: 700;
  line-height: 1.35;
}
.ink-lead, .ink-note, .ink-caption, .ink-alt p, .ink-panel p {
  margin: 0;
  color: #e6e0d4;
  font-size: clamp(.95rem, 2.8vw, 1.02rem);
  line-height: 1.55;
}
.ink-lead { margin-bottom: 16px; }
.ink-note { margin-top: 14px; }
.ink-caption { margin-top: 8px; font-size: .95rem; }
.ink-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  color: #e6e0d4;
  font-size: .95rem;
  line-height: 1.4;
}
.ink-legend li { display: flex; align-items: center; gap: 8px; }
.ink-swatch {
  width: 22px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 3px;
}
.ink-swatch-ivory { background: #f3ead7; transform: rotate(-4deg); }
.ink-swatch-teal {
  background: transparent;
  border-top: 3px solid #00d4a8;
  height: 0;
  border-radius: 2px;
  transform: rotate(3deg);
}
.ink-swatch-hatch {
  height: 12px;
  background: repeating-linear-gradient(40deg, transparent, transparent 2px, #00d4a8 2px, #00d4a8 3px);
}
.ink-alt {
  margin-top: 14px;
  border-top: 1px dashed rgba(243, 234, 215, .22);
  padding-top: 10px;
}
.ink-alt summary {
  cursor: pointer;
  color: #00d4a8;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.5;
}
.ink-alt[open] summary { margin-bottom: 8px; }
.prose .ink-figure ol, .ink-track, .ink-nodes, .ink-paths {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ink-track {
  display: grid;
  gap: 12px;
}
.ink-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  background: #f3ead7;
  color: #1c1915;
  border-radius: 4px 14px 4px 12px;
  padding: 12px 14px;
}
.ink-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #080c12;
  color: #f3ead7;
  font-size: .95rem;
  font-weight: 700;
  border: 2px solid #00d4a8;
  box-shadow: 1px 2px 0 rgba(0, 212, 168, .35);
}
.ink-step strong {
  display: block;
  color: #1c1915;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
.ink-step span {
  display: block;
  color: #3a342c;
  font-size: .95rem;
  line-height: 1.45;
  margin-top: 2px;
}
.ink-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 0 52px;
}
.ink-fork .ink-step {
  margin: 0;
  grid-template-columns: 1fr;
  background: rgba(243, 234, 215, .92);
}
.ink-fork .ink-badge { margin-bottom: 4px; }
.ink-maybe {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #085c4a;
  border: 1px dashed #085c4a;
  border-radius: 999px;
  vertical-align: middle;
}
.ink-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-width: 0;
}
.ink-panel {
  min-width: 0;
  padding: 12px;
  border: 1px dashed rgba(243, 234, 215, .3);
  border-radius: 10px;
  background: rgba(15, 21, 32, .55);
}
.ink-panel h3 {
  margin: 0 0 10px;
  color: #f3ead7;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}
.ink-chart {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.ink-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ink-path {
  min-width: 0;
  padding: 14px;
  border-radius: 10px;
  background: rgba(15, 21, 32, .55);
  border: 1px solid rgba(0, 212, 168, .28);
}
.ink-path h3 {
  margin: 0 0 12px;
  color: #00d4a8;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}
.ink-nodes { display: grid; gap: 8px; }
.ink-nodes li {
  background: #f3ead7;
  color: #1c1915;
  border-radius: 4px 12px 4px 10px;
  padding: 11px 13px;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.4;
}
.ink-arrow {
  display: block;
  width: 28px;
  height: 22px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .ink-fork, .ink-split, .ink-paths { grid-template-columns: 1fr; }
  .ink-fork { margin-left: 0; }
}
@media (max-width: 390px) {
  .ink-figure { padding: 14px 12px; border-radius: 10px; }
  .ink-step, .ink-nodes li { padding: 11px 12px; }
  .ink-badge { width: 36px; height: 36px; font-size: .88rem; }
}
.ink-figure .ink-badge { display: grid; margin-top: 0; color: #f3ead7; }

/* News timelines (actualités) — stack on mobile */
.news-tl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
  position: relative;
}
.news-tl::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 18px;
  height: 2px;
  background: rgba(83, 113, 148, 0.55);
  pointer-events: none;
}
.news-tl-item {
  background: rgba(8, 12, 18, 0.45);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px 16px;
  text-align: center;
}
.news-tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 auto 12px;
  position: relative;
  z-index: 1;
}
.news-tl-dot.start { background: #ffbc9e; }
.news-tl-dot.end { background: #a7f3d0; }
.news-tl-date {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.news-tl-label {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}
@media (max-width: 640px) {
  .news-tl {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .news-tl::before {
    left: 23px;
    right: auto;
    top: 28px;
    bottom: 28px;
    width: 2px;
    height: auto;
  }
  .news-tl-item {
    text-align: left;
    padding-left: 48px;
    position: relative;
  }
  .news-tl-dot {
    position: absolute;
    left: 18px;
    top: 22px;
    margin: 0;
  }
}