/* Généré au build depuis design/tokens.json (cardiochezsoi, version 1.1-astro-export) : ne pas éditer. */
:root {
  --c-footer: #172e2b;
  --c-apercu-navigation-backdrop-172e2b99: #172e2b99;
  --c-ink: #183b35;
  --c-hero-floating-183b3510: #183b3510;
  --c-mobile-nav-183b3512: #183b3512;
  --c-editorial-action-hover: #194838;
  --c-comparison-section: #1e423a;
  --c-about-stamp-203c3015: #203c3015;
  --c-editorial-action: #24604e;
  --c-comparison-card: #294c42;
  --c-chooser-2b4c2810: #2b4c2810;
  --c-illustration-scene-equipment-art-34452a14: #34452a14;
  --c-affiliation-note-385348: #385348;
  --c-text-link-hover-397451: #397451;
  --c-floating-icon-406843: #406843;
  --c-disabled-ink: #445448;
  --c-hero-eyebrow-526b58: #526b58;
  --c-small-kicker-526d4c: #526d4c;
  --c-comparison-link-526d60: #526d60;
  --c-editorial-meta-span-first-child-527149: #527149;
  --c-text-muted: #566259;
  --c-comparison-card-577166: #577166;
  --c-newsletter-icon-587043: #587043;
  --c-benefit-span-587455: #587455;
  --c-consent-5a6d52: #5a6d52;
  --c-product-card-li-before-607c56: #607c56;
  --c-email-field-button-disabled-61765a: #61765a;
  --c-root-626e68: #626e68;
  --c-brand-dot-638a51: #638a51;
  --c-product-card-ul-667166: #667166;
  --c-brand-light-img-ui-icon-668469: #668469;
  --c-time-pill-67795b: #67795b;
  --c-a-focus-visible-button-focus-visible-input-focus-visible-select-focus-visible-688e43: #688e43;
  --c-hero-proof-697567: #697567;
  --c-control-border: #69776b;
  --c-hero-photo-label-span-69865a: #69865a;
  --c-product-bottom-small-6a746b: #6a746b;
  --c-button-disabled-6b796c: #6b796c;
  --c-about-stamp-img-ui-icon-6d8453: #6d8453;
  --c-category-arrow-789172: #789172;
  --c-hero-eyebrow-span-7b9b65: #7b9b65;
  --c-editorial-meta-span-last-child-7c8378: #7c8378;
  --c-purchase-border: #8c651e;
  --c-footer-brand-span-93aa98: #93aa98;
  --c-affiliation-note-p-9cb3a1: #9cb3a1;
  --c-comparison-note-a8bdaf: #a8bdaf;
  --c-brand-light-brand-dot-abc28b: #abc28b;
  --c-footer-secondary: #b3c5b6;
  --c-illustration-scene-before-b5b9a5: #b5b9a5;
  --c-scene-row-b8c2b4: #b8c2b4;
  --c-comparison-section-section-kicker-bacdb0: #bacdb0;
  --c-comparison-intro: #becfc3;
  --c-footer-brand-p-c1cfc1: #c1cfc1;
  --c-footer-disclosure: #c2d1c6;
  --c-comparison-criterion: #c6ddaa;
  --c-illustration-scene-c7c6b2: #c7c6b2;
  --c-scene-row-c7c9b8: #c7c9b8;
  --c-comparison-body: #c8d5cc;
  --c-criteria-list-li-span-ccd6c2: #ccd6c2;
  --c-button-outline-ccd7cd: #ccd7cd;
  --c-email-field-cdd8c2: #cdd8c2;
  --c-comparison-link-hover-d1e8b6: #d1e8b6;
  --c-selection-d2e3b8: #d2e3b8;
  --c-scene-row-d3dfdd: #d3dfdd;
  --c-accent: #d5e8b5;
  --c-chooser-select-d9e1d3: #d9e1d3;
  --c-illustration-scene-dad6c4: #dad6c4;
  --c-newsletter-dce5d1: #dce5d1;
  --c-disabled-surface: #dde3d8;
  --c-article-art-1-dde7e4: #dde7e4;
  --c-divider: #dfe5dc;
  --c-chooser-e0e7d8: #e0e7d8;
  --c-scene-window-before-e3e6db: #e3e6db;
  --c-category-card-hover-category-art-e3ebdc: #e3ebdc;
  --c-illustration-scene-e4e7da: #e4e7da;
  --c-comparison-section-text-link-e4ecd9: #e4ecd9;
  --c-comparison-art-e5ecdb: #e5ecdb;
  --c-guide-image-e6e9dd: #e6e9dd;
  --c-article-art-e8eada: #e8eada;
  --c-newsletter: #e8eedf;
  --c-purchase-hover: #e9b64b;
  --c-sage: #e9eee5;
  --c-article-art-2-ede6d9: #ede6d9;
  --c-floating-icon-edf1e7: #edf1e7;
  --c-site-footer-edf2e9: #edf2e9;
  --c-chooser-section: #eef2e8;
  --c-button-outline-hover-eef3e9: #eef3e9;
  --c-category-art-eff1e9: #eff1e9;
  --c-scene-window-f1f1e9: #f1f1e9;
  --c-product-visual-f1f3eb: #f1f3eb;
  --c-time-pill-f1f5ec: #f1f5ec;
  --c-brand-light-f2f4eb: #f2f4eb;
  --c-about-stamp-f3f4e9: #f3f4e9;
  --c-purchase: #f4c465;
  --c-scene-window-f7f8ef: #f7f8ef;
  --c-comparison-heading: #f9fcf5;
  --c-chooser-select-fafbf7: #fafbf7;
  --c-paper: #fbfbf6;
  --c-white-short: #fff;
  --c-scene-window-ffffef80: #ffffef80;
  --c-white: #ffffff;
  --c-hero-floating-ffffffb0: #ffffffb0;
  --c-hero-photo-label-ffffffe8: #ffffffe8;
  --c-hero-floating-fffffff2: #fffffff2;
  --font-primary: Manrope, Arial, sans-serif;
  --fw-body: 400;
  --fw-brand-rest: 500;
  --fw-navigation: 600;
  --fw-headings: 650;
  --fw-emphasis: 700;
  --fw-brand-cardio: 800;
  --fw-500: 500;
  --fw-600: 600;
  --fw-650: 650;
  --fw-700: 700;
  --fw-800: 800;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-21: 21px;
  --fs-22: 22px;
  --fs-23: 23px;
  --fs-24: 24px;
  --fs-25: 25px;
  --fs-26: 26px;
  --fs-27: 27px;
  --fs-28: 28px;
  --fs-29: 29px;
  --fs-30: 30px;
  --fs-31: 31px;
  --fs-36: 36px;
  --fs-38: 38px;
  --fs-39: 39px;
  --fs-44: 44px;
  --fs-49: 49px;
  --fs-section-title: clamp(29px,2.7vw,40px);
  --fs-hero-mobile: clamp(43px,12.7vw,67px);
  --fs-hero-desktop: clamp(44px,4.65vw,70px);
  --fs-fluide-clamp-45px-12-7vw-67px: clamp(45px,12.7vw,67px);
  --lh-1: 1;
  --lh-1_06: 1.06;
  --lh-1_13: 1.13;
  --lh-1_16: 1.16;
  --lh-1_17: 1.17;
  --lh-1_2: 1.2;
  --lh-1_25: 1.25;
  --lh-1_3: 1.3;
  --lh-1_4: 1.4;
  --lh-1_5: 1.5;
  --lh-1_6: 1.6;
  --lh-1_65: 1.65;
  --lh-1_7: 1.7;
  --lh-1_75: 1.75;
  --lh-1_8: 1.8;
  --ls-n0_7: -0.7px;
  --ls-n0_15: -0.15px;
  --ls-n0_1: -0.1px;
  --ls-n0_2: -0.2px;
  --ls-n0_6: -0.6px;
  --ls-n1_15: -1.15px;
  --ls-n1_55: -1.55px;
  --ls-n1_5: -1.5px;
  --ls-n1_7: -1.7px;
  --ls-n1: -1px;
  --ls-n2_5: -2.5px;
  --ls-n2_7: -2.7px;
  --ls-n3_6: -3.6px;
  --ls-0: 0;
  --s-4: 4px;
  --s-5: 5px;
  --s-6: 6px;
  --s-7: 7px;
  --s-8: 8px;
  --s-9: 9px;
  --s-10: 10px;
  --s-11: 11px;
  --s-12: 12px;
  --s-13: 13px;
  --s-14: 14px;
  --s-15: 15px;
  --s-16: 16px;
  --s-17: 17px;
  --s-18: 18px;
  --s-19: 19px;
  --s-20: 20px;
  --s-21: 21px;
  --s-22: 22px;
  --s-23: 23px;
  --s-24: 24px;
  --s-25: 25px;
  --s-26: 26px;
  --s-27: 27px;
  --s-28: 28px;
  --s-29: 29px;
  --s-30: 30px;
  --s-31: 31px;
  --s-32: 32px;
  --s-33: 33px;
  --s-34: 34px;
  --s-35: 35px;
  --s-38: 38px;
  --s-40: 40px;
  --s-43: 43px;
  --s-45: 45px;
  --s-46: 46px;
  --s-48: 48px;
  --s-50: 50px;
  --s-52: 52px;
  --s-55: 55px;
  --s-56: 56px;
  --s-58: 58px;
  --s-62: 62px;
  --s-64: 64px;
  --s-67: 67px;
  --s-74: 74px;
  --s-78: 78px;
  --s-80: 80px;
  --s-84: 84px;
  --s-92: 92px;
  --s-95: 95px;
  --s-96: 96px;
  --s-104: 104px;
  --layout-container-max: 1280px;
  --layout-desktop-gutter: 48px;
  --layout-medium-gutter: 32px;
  --layout-mobile-gutter: 20px;
  --layout-section-desktop-top: 92px;
  --layout-section-mobile-top: 58px;
  --layout-grid-guide-gap: 29px;
  --layout-grid-product-gap: 20px;
  --layout-touch-control-min-height: 44px;
  --r-input: 6px;
  --r-button: 7px;
  --r-small-card: 10px;
  --r-category: 11px;
  --r-card: 12px;
  --r-dialog: 14px;
  --r-chooser: 15px;
  --r-hero-desktop: 18px;
  --r-hero-mobile: 12px;
  --r-pill: 30px;
  --r-circle: 50%;
  --r-10: 10px;
  --r-11: 11px;
  --r-12: 12px;
  --r-13: 13px;
  --r-14: 14px;
  --r-15: 15px;
  --r-18: 18px;
  --r-30: 30px;
  --r-4: 4px;
  --r-50pct: 50%;
  --r-6: 6px;
  --r-7: 7px;
  --r-8: 8px;
  --r-9: 9px;
  --sh-floating-hero: 0 7px 28px #183b3510;
  --sh-chooser: 0 12px 40px #2b4c2810;
  --sh-mobile-menu: 0 15px 25px #183b3512;
  --sh-about-stamp: 0 5px 20px #203c3015;
  --sh-focus-on-light: 0 0 0 4px #ffffff;
}

/* Dérivée de missions/20261012-design-externe/source/styles.css par missions/20261014-design-externe/convertir_css.py :
   toute valeur visuelle littérale est remplacée par la variable de /styles/jetons.css (design/tokens.json). Ne pas éditer
   à la main : les ajouts du site vivent dans site.css. */
@font-face { font-family: Manrope; src: url("/fonts/manrope-variable.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; }
/* Standalone CSS; no Tailwind or build step required. */
[hidden] { display: none !important; }
button,input,select { font: inherit; }
button { border: 0; }
input,select { margin: 0; }
.sr-only { position: absolute;width: 1px;height: 1px;padding: 0;margin: calc(-1 * var(--s-4));overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0; }
img.ui-icon { display: inline-block;flex-shrink: 0;object-fit: contain;vertical-align: middle; }

:root {
  --ink: var(--c-ink);
  --green: var(--c-editorial-action);
  --accent: var(--c-accent);
  --paper: var(--c-paper);
  --muted: var(--c-root-626e68);
  --line: var(--c-divider);
  --navy: var(--c-footer);
  --radius: 14px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-primary);
  font-size: var(--fs-15);
  line-height: var(--lh-1_65);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: var(--lh-1_16);
  font-weight: var(--fw-650);
}
h1 {
  font-size: var(--fs-hero-desktop);
  letter-spacing: var(--ls-n3_6);
}
h2 {
  font-size: var(--fs-section-title);
  letter-spacing: var(--ls-n1_55);
}
h3 {
  letter-spacing: var(--ls-n0_6);
}
p {
  color: var(--muted);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--c-a-focus-visible-button-focus-visible-input-focus-visible-select-focus-visible-688e43);
  outline-offset: 5px;
}
::selection {
  background: var(--c-selection-d2e3b8);
}
.container {
  width: min(1280px, calc(100% - 96px));
  margin-inline: auto;
}
.section {
  padding-top: var(--s-92);
  padding-bottom: var(--s-18);
}
.section-kicker {
  color: var(--green);
  font-size: var(--fs-13);
  font-weight: var(--fw-650);
  margin-bottom: var(--s-13);
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-30);
  margin-bottom: var(--s-34);
}
.section-heading > div > p:last-child:not(.section-kicker) {
  margin-top: var(--s-15);
  max-width: 650px;
}
.text-link {
  display: inline-flex;
  gap: var(--s-12);
  align-items: center;
  font-weight: var(--fw-650);
  font-size: var(--fs-13);
  white-space: nowrap;
}
.text-link:hover {
  color: var(--c-text-link-hover-397451);
}
.text-link img.ui-icon,
.button img.ui-icon {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.text-link:hover img.ui-icon,
.button:hover img.ui-icon {
  transform: translateX(3px);
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-18);
  background: var(--green);
  color: var(--c-white);
  border: 1px solid var(--green);
  padding: var(--s-15) var(--s-23);
  border-radius: var(--r-7);
  font-weight: var(--fw-650);
  font-size: var(--fs-13);
  line-height: var(--lh-1_4);
  transition: background 0.18s;
}
.button:hover {
  background: var(--c-editorial-action-hover);
}
.button-outline {
  background: transparent;
  color: var(--green);
  border-color: var(--c-button-outline-ccd7cd);
}
.button-outline:hover {
  background: var(--c-button-outline-hover-eef3e9);
}
.button-small {
  font-size: var(--fs-12);
  padding: var(--s-12) var(--s-16);
  gap: var(--s-12);
}
.skip-link {
  position: fixed;
  left: 20px;
  top: -80px;
  padding: var(--s-14) var(--s-20);
  background: var(--c-white);
  z-index: 99;
}
.skip-link:focus {
  top: 15px;
}
.site-header {
  height: 88px;
  background: var(--c-paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
}
.header-inner {
  width: min(1400px, calc(100% - 72px));
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  gap: var(--s-24);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  white-space: nowrap;
  font-size: var(--fs-24);
  letter-spacing: var(--ls-n1_15);
  font-weight: var(--fw-800);
  line-height: var(--lh-1);
}
.brand > .brand-symbol {
  color: var(--green);
  flex-shrink: 0;
}
.brand-rest {
  font-weight: var(--fw-500);
}
.brand-dot {
  color: var(--c-brand-dot-638a51);
}
.desktop-nav {
  display: flex;
  justify-content: center;
  flex: 1;
  align-items: center;
  gap: var(--s-23);
}
.desktop-nav a {
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  white-space: nowrap;
  position: relative;
}
.desktop-nav a:after {
  content: '';
  position: absolute;
  height: 1px;
  bottom: -7px;
  left: 0;
  width: 0;
  background: var(--green);
  transition: width 0.2s;
}
.desktop-nav a:hover:after {
  width: 100%;
}
.menu-toggle {
  display: none;
  border: 0;
  background: none;
  padding: var(--s-8);
  color: var(--ink);
}
.mobile-nav {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: var(--s-10) var(--s-24) var(--s-22);
  box-shadow: var(--sh-mobile-menu);
}
.mobile-nav a {
  padding: var(--s-13) 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.hero {
  padding: var(--s-52) 0 var(--s-46);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.13fr;
  gap: var(--s-62);
  align-items: center;
}
.hero-copy {
  padding: var(--s-12) 0 var(--s-10);
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  color: var(--c-hero-eyebrow-526b58);
  margin-bottom: var(--s-25);
}
.hero-eyebrow > span {
  width: 7px;
  height: 7px;
  background: var(--c-hero-eyebrow-span-7b9b65);
  border-radius: var(--r-circle);
}
.hero-description {
  max-width: 420px;
  font-size: var(--fs-15);
  line-height: var(--lh-1_8);
  margin-top: var(--s-26);
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-22);
  margin-top: var(--s-30);
}
.hero-secondary {
  display: flex;
  gap: var(--s-8);
  align-items: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-650);
}
.hero-secondary img.ui-icon {
  width: 16px;
}
.hero-proof {
  display: flex;
  gap: var(--s-22);
  margin-top: var(--s-30);
  color: var(--c-hero-proof-697567);
  font-size: var(--fs-12);
}
.hero-proof > span {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.hero-proof img.ui-icon {
  width: 15px;
  height: 15px;
}
.hero-visual {
  position: relative;
  align-self: stretch;
  min-height: 505px;
  border-radius: var(--r-18);
  isolation: isolate;
}
.hero-visual > img {
  height: 100%;
  width: 100%;
  position: absolute;
  border-radius: var(--r-18);
  object-position: 56% center;
}
.hero-photo-label {
  position: absolute;
  top: 19px;
  left: 21px;
  padding: var(--s-8) var(--s-13);
  border-radius: var(--r-30);
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  background: var(--c-hero-photo-label-ffffffe8);
  display: flex;
  align-items: center;
  gap: var(--s-7);
}
.hero-photo-label > span {
  width: 5px;
  height: 5px;
  border-radius: var(--r-circle);
  background: var(--c-hero-photo-label-span-69865a);
}
.hero-floating {
  position: absolute;
  left: -25px;
  right: 40px;
  bottom: 28px;
  background: var(--c-hero-floating-fffffff2);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-hero-floating-ffffffb0);
  box-shadow: var(--sh-floating-hero);
  display: flex;
  align-items: center;
  gap: var(--s-13);
  padding: var(--s-19) var(--s-22);
  border-radius: var(--r-10);
}
.hero-floating strong {
  font-size: var(--fs-12);
  display: block;
  letter-spacing: var(--ls-n0_15);
}
.hero-floating small {
  font-size: var(--fs-12);
  display: block;
  color: var(--muted);
  margin-top: var(--s-4);
}
.hero-floating > img.ui-icon {
  margin-left: auto;
}
.floating-icon {
  padding: var(--s-10);
  border-radius: var(--r-circle);
  background: var(--c-floating-icon-edf1e7);
  color: var(--c-floating-icon-406843);
}
.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: var(--s-29);
  border-block: 1px solid var(--line);
  gap: var(--s-24);
}
.benefit {
  display: flex;
  align-items: center;
  gap: var(--s-12);
}
.benefit > span {
  color: var(--c-benefit-span-587455);
  flex-shrink: 0;
}
.benefit h3 {
  font-size: var(--fs-12);
  font-weight: var(--fw-700);
  letter-spacing: var(--ls-n0_1);
  margin-bottom: var(--s-5);
}
.benefit p {
  font-size: var(--fs-12);
  line-height: var(--lh-1_5);
}
.categories-section {
  padding-top: var(--s-67);
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-15);
}
.category-card {
  position: relative;
}
.category-art {
  background: var(--c-category-art-eff1e9);
  border-radius: var(--r-11);
  transition: background 0.2s;
  overflow: hidden;
  padding: var(--s-10) 0;
}
.category-card:hover .category-art {
  background: var(--c-category-card-hover-category-art-e3ebdc);
}
.equipment-art {
  width: 100%;
  height: auto;
  display: block;
}
.category-card h3 {
  font-size: var(--fs-13);
  margin-top: var(--s-15);
  font-weight: var(--fw-700);
  letter-spacing: var(--ls-n0_2);
}
.category-card p {
  font-size: var(--fs-12);
  margin-top: var(--s-6);
}
.category-arrow {
  position: absolute;
  right: 10px;
  top: 10px;
  color: var(--c-category-arrow-789172);
}
.category-arrow img.ui-icon {
  width: 13px;
}
.guides-section {
  padding-bottom: var(--s-84);
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-29);
}
.guide-image {
  position: relative;
  height: 260px;
  border-radius: var(--r-12);
  overflow: hidden;
  display: block;
  background: var(--c-guide-image-e6e9dd);
}
.guide-image > img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
}
.guide-card:hover .guide-image > img {
  transform: scale(1.025);
}
.image-label {
  position: absolute;
  left: 18px;
  bottom: 17px;
  color: var(--ink);
  background: var(--paper);
  font-size: var(--fs-12);
  font-weight: var(--fw-650);
  padding: var(--s-6) var(--s-11);
  border-radius: var(--r-4);
}
.illustration-scene {
  height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--c-illustration-scene-e4e7da) 0%, var(--c-illustration-scene-e4e7da) 65%, var(--c-illustration-scene-c7c6b2) 65%, var(--c-illustration-scene-dad6c4) 100%);
}
.illustration-scene:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 32%;
  height: 2px;
  width: 100%;
  background: var(--c-illustration-scene-before-b5b9a5);
}
.illustration-scene .equipment-art {
  position: absolute;
  width: 94%;
  left: 3%;
  bottom: 5%;
  filter: drop-shadow(0 10px 5px var(--c-illustration-scene-equipment-art-34452a14));
}
.scene-window {
  position: absolute;
  width: 100px;
  height: 160px;
  top: -10px;
  right: 22px;
  background: var(--c-scene-window-f7f8ef);
  transform: skewY(-5deg);
  border: 8px solid var(--c-scene-window-f1f1e9);
  box-shadow: calc(-1 * var(--s-35)) var(--s-45) var(--s-35) var(--c-scene-window-ffffef80);
}
.scene-window:before {
  content: '';
  position: absolute;
  top: 0;
  left: 45%;
  width: 4px;
  height: 100%;
  background: var(--c-scene-window-before-e3e6db);
}
.scene-row {
  background: linear-gradient(180deg, var(--c-scene-row-d3dfdd) 0%, var(--c-scene-row-d3dfdd) 65%, var(--c-scene-row-b8c2b4) 65%, var(--c-scene-row-c7c9b8) 100%);
}
.editorial-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--s-10);
  margin-top: var(--s-20);
  margin-bottom: var(--s-12);
  font-size: var(--fs-12);
}
.editorial-meta > span:first-child {
  color: var(--c-editorial-meta-span-first-child-527149);
  font-weight: var(--fw-650);
}
.editorial-meta > span:last-child {
  color: var(--c-editorial-meta-span-last-child-7c8378);
}
.guide-card h3 {
  font-size: var(--fs-23);
  max-width: 370px;
  line-height: var(--lh-1_3);
}
.guide-card p {
  font-size: var(--fs-12);
  margin-top: var(--s-12);
  line-height: var(--lh-1_7);
  max-width: 350px;
}
.guide-card > .text-link {
  margin-top: var(--s-20);
  font-size: var(--fs-12);
}
.comparison-section {
  background: var(--c-comparison-section);
  color: var(--c-comparison-heading);
  padding: var(--s-64) 0 var(--s-33);
}
.comparison-section .section-heading {
  margin-bottom: var(--s-32);
}
.comparison-section .section-kicker {
  color: var(--c-comparison-section-section-kicker-bacdb0);
}
.comparison-section .section-heading > div > p:last-child {
  color: var(--c-comparison-intro);
  font-size: var(--fs-13);
}
.comparison-section .text-link {
  color: var(--c-comparison-section-text-link-e4ecd9);
  font-size: var(--fs-12);
}
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-21);
}
.comparison-card {
  border: 1px solid var(--c-comparison-card-577166);
  border-radius: var(--r-11);
  background: var(--c-comparison-card);
  overflow: hidden;
  padding: var(--s-17) var(--s-24) var(--s-24);
  position: relative;
}
.comparison-art {
  width: 155px;
  height: 103px;
  margin-left: auto;
  margin-bottom: calc(-1 * var(--s-15));
  background: var(--c-comparison-art-e5ecdb);
  border-radius: var(--r-8);
  transform: rotate(-5deg);
}
.comparison-art .equipment-art {
  height: 100%;
}
.comparison-criterion {
  display: block;
  color: var(--c-comparison-criterion);
  font-size: var(--fs-12);
  margin-top: var(--s-10);
}
.comparison-card h3 {
  font-size: var(--fs-21);
  margin-top: var(--s-10);
  max-width: 235px;
  line-height: var(--lh-1_25);
}
.comparison-card p {
  color: var(--c-comparison-body);
  font-size: var(--fs-12);
  margin-top: var(--s-13);
  max-width: 280px;
}
.comparison-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--c-comparison-link-526d60);
  padding-top: var(--s-18);
  margin-top: var(--s-23);
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
}
.comparison-link:hover {
  color: var(--c-comparison-link-hover-d1e8b6);
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-20);
}
.product-card {
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  background: var(--c-white-short);
  overflow: hidden;
}
.product-visual {
  position: relative;
  background: var(--c-product-visual-f1f3eb);
  padding: var(--s-29) var(--s-8) var(--s-5);
  min-height: 190px;
}
.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  border-radius: var(--r-4);
  background: var(--c-white-short);
  padding: var(--s-4) var(--s-8);
  font-size: var(--fs-12);
  font-weight: var(--fw-650);
}
.product-info {
  padding: var(--s-22);
}
.product-brand {
  font-size: var(--fs-12);
  margin-bottom: var(--s-5);
}
.product-card h3 {
  font-size: var(--fs-23);
}





.product-card ul {
  padding: 0;
  list-style: none;
  margin: var(--s-20) 0 var(--s-22);
  color: var(--c-product-card-ul-667166);
  font-size: var(--fs-12);
}
.product-card li {
  margin-block: var(--s-7);
  display: flex;
  gap: var(--s-8);
}
.product-card li:before {
  content: '✓';
  color: var(--c-product-card-li-before-607c56);
}
.product-bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--s-15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-8);
}
.product-bottom strong {
  font-size: var(--fs-19);
  display: block;
  letter-spacing: var(--ls-n0_7);
}
.product-bottom small {
  display: block;
  font-size: var(--fs-12);
  color: var(--c-product-bottom-small-6a746b);
}
.product-test {
  display: flex;
  gap: var(--s-5);
  font-size: var(--fs-12);
  align-items: center;
  font-weight: var(--fw-650);
}
.product-test img.ui-icon {
  width: 14px;
}
.choose-section {
  background: var(--c-chooser-section);
  margin-top: var(--s-78);
  padding-block: var(--s-74);
}
.choose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-95);
  align-items: center;
}
.choose-grid h2 {
  font-size: var(--fs-44);
  line-height: var(--lh-1_13);
  letter-spacing: var(--ls-n1_7);
}
.choose-intro {
  max-width: 420px;
  font-size: var(--fs-13);
  margin-top: var(--s-22);
}
.criteria-list {
  list-style: none;
  padding: 0;
  margin: var(--s-27) 0 var(--s-24);
}
.criteria-list li {
  display: flex;
  gap: var(--s-15);
  margin-top: var(--s-18);
}
.criteria-list li > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-criteria-list-li-span-ccd6c2);
  border-radius: var(--r-circle);
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  flex-shrink: 0;
  margin-top: var(--s-4);
}
.criteria-list h3 {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-n0_1);
  margin-bottom: var(--s-5);
}
.criteria-list p {
  font-size: var(--fs-12);
}
.choose-grid > .text-link {
  font-size: var(--fs-12);
}
.chooser {
  background: var(--c-white-short);
  padding: var(--s-32);
  border-radius: var(--r-15);
  box-shadow: var(--sh-chooser);
  border: 1px solid var(--c-chooser-e0e7d8);
}
.chooser-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-10);
  margin-bottom: var(--s-23);
}
.small-kicker {
  font-size: var(--fs-12);
  font-weight: var(--fw-650);
  color: var(--c-small-kicker-526d4c);
}
.time-pill {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-size: var(--fs-12);
  color: var(--c-time-pill-67795b);
  background: var(--c-time-pill-f1f5ec);
  padding: var(--s-5) var(--s-8);
  border-radius: var(--r-15);
}
.time-pill img.ui-icon {
  width: 12px;
  height: 12px;
}
.chooser h3 {
  font-size: var(--fs-26);
  line-height: var(--lh-1_2);
  margin-bottom: var(--s-26);
  max-width: 280px;
}
.chooser label {
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--fw-650);
  margin-bottom: var(--s-8);
}
.chooser select {
  width: 100%;
  background: var(--c-chooser-select-fafbf7);
  border: 1px solid var(--c-chooser-select-d9e1d3);
  color: var(--ink);
  border-radius: var(--r-6);
  padding: var(--s-12) var(--s-30) var(--s-12) var(--s-12);
  font-size: var(--fs-12);
  min-height: 44px;
}
.chooser-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  margin-top: var(--s-19);
}
.chooser form > .button {
  width: 100%;
  margin-top: var(--s-26);
  justify-content: space-between;
}
.chooser-note {
  font-size: var(--fs-12);
  text-align: center;
  margin-top: var(--s-15);
}
.chooser-result {
  border-top: 1px solid var(--line);
  margin-top: var(--s-24);
  padding-top: var(--s-20);
  display: flex;
  align-items: center;
  gap: var(--s-15);
}
.chooser-result > .equipment-art {
  width: 90px;
  flex-shrink: 0;
}
.chooser-result strong {
  font-size: var(--fs-12);
  line-height: var(--lh-1_4);
  display: block;
}
.chooser-result p {
  font-size: var(--fs-12);
  margin-top: var(--s-8);
}
.chooser-result a {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-size: var(--fs-12);
  font-weight: var(--fw-650);
  margin-top: var(--s-10);
}
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-28);
}
.article-art {
  height: 215px;
  display: flex;
  justify-content: center;
  background: var(--c-article-art-e8eada);
  border-radius: var(--r-12);
  overflow: hidden;
}
.article-art .equipment-art {
  width: 85%;
  height: 100%;
  padding: var(--s-5);
}
.article-art-1 {
  background: var(--c-article-art-1-dde7e4);
}
.article-art-2 {
  background: var(--c-article-art-2-ede6d9);
}
.article-card h3 {
  font-size: var(--fs-22);
  line-height: var(--lh-1_3);
}
.article-card p {
  font-size: var(--fs-12);
  line-height: var(--lh-1_7);
  margin-top: var(--s-12);
}
.article-card > .text-link {
  font-size: var(--fs-12);
  margin-top: var(--s-19);
}
.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-92);
  align-items: center;
  padding-block: var(--s-95);
}
.about-visual {
  height: 370px;
  position: relative;
}
.about-visual > img {
  width: 100%;
  height: 100%;
  object-position: 25% center;
  border-radius: var(--r-13);
}
.about-stamp {
  position: absolute;
  right: -20px;
  bottom: 25px;
  background: var(--c-about-stamp-f3f4e9);
  display: flex;
  gap: var(--s-13);
  align-items: center;
  padding: var(--s-17) var(--s-21);
  border-radius: var(--r-9);
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  box-shadow: var(--sh-about-stamp);
}
.about-stamp img.ui-icon {
  width: 27px;
  height: 27px;
  color: var(--c-about-stamp-img-ui-icon-6d8453);
}
.about-copy h2 {
  font-size: var(--fs-44);
  line-height: var(--lh-1_17);
}
.about-copy > p:not(.section-kicker) {
  font-size: var(--fs-13);
  max-width: 450px;
  line-height: var(--lh-1_8);
  margin-top: var(--s-22);
}
.about-copy .text-link {
  font-size: var(--fs-12);
  margin-top: var(--s-24);
}
.site-footer {
  background: var(--navy);
  color: var(--c-site-footer-edf2e9);
  padding: var(--s-56) 0 var(--s-23);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.65fr 1fr 1.1fr 1fr;
  gap: var(--s-40);
  padding-bottom: var(--s-38);
}
.brand-light {
  color: var(--c-brand-light-f2f4eb);
}
.brand-light > img.ui-icon {
  color: var(--c-brand-light-img-ui-icon-668469);
}
.brand-light .brand-dot {
  color: var(--c-brand-light-brand-dot-abc28b);
}
.footer-brand p {
  color: var(--c-footer-brand-p-c1cfc1);
  font-size: var(--fs-13);
  margin-top: var(--s-23);
}
.footer-brand > span {
  display: block;
  font-size: var(--fs-12);
  color: var(--c-footer-brand-span-93aa98);
  margin-top: var(--s-15);
}
.footer-top > div > h3 {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-0);
  margin-bottom: var(--s-20);
}
.footer-top > div:not(:first-child) > a {
  display: block;
  font-size: var(--fs-12);
  color: var(--c-footer-secondary);
  margin-top: var(--s-11);
}
.footer-top a:hover,
.footer-bottom a:hover {
  color: var(--c-white);
}
.footer-top .footer-back {
  display: flex !important;
  align-items: center;
  gap: var(--s-8);
  margin-top: var(--s-23) !important;
}
.footer-back img.ui-icon {
  transform: rotate(-90deg);
  width: 15px;
}
.affiliation-note {
  padding: var(--s-23) 0;
  border-block: 1px solid var(--c-affiliation-note-385348);
  display: flex;
  gap: var(--s-45);
  align-items: center;
  justify-content: space-between;
}
.affiliation-note p {
  color: var(--c-affiliation-note-p-9cb3a1);
  font-size: var(--fs-12);
  max-width: 780px;
}
.affiliation-note a {
  display: flex;
  gap: var(--s-9);
  align-items: center;
  font-size: var(--fs-12);
  white-space: nowrap;
}
.affiliation-note img.ui-icon {
  width: 14px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--s-20);
  font-size: var(--fs-12);
  color: var(--c-footer-brand-span-93aa98);
  padding-top: var(--s-23);
}
.footer-bottom > div {
  display: flex;
  gap: var(--s-20);
}
@media (min-width: 1500px) {
  .hero-grid {
    gap: var(--s-80);
  }
  .hero-visual {
    min-height: 550px;
  }
}
@media (max-width: 1200px) {
  .container {
    width: calc(100% - 64px);
  }
  .header-inner {
    width: calc(100% - 48px);
    gap: var(--s-20);
  }
  .desktop-nav {
    gap: var(--s-15);
  }
  .desktop-nav a {
    font-size: var(--fs-12);
  }
  .header-cta {
    display: none;
  }
  .hero-grid {
    gap: var(--s-35);
  }
  .hero-visual {
    min-height: 490px;
  }
  .hero-actions {
    gap: var(--s-16);
  }
  .hero-actions > .button {
    padding: var(--s-14) var(--s-16);
    font-size: var(--fs-12);
  }
  .hero-secondary {
    font-size: var(--fs-12);
  }
  .brand {
    font-size: var(--fs-22);
  }
  .benefits {
    gap: var(--s-15);
  }
  .benefit {
    gap: var(--s-10);
  }
  .benefit h3 {
    font-size: var(--fs-12);
  }
  .benefit p {
    font-size: var(--fs-12);
  }
  .category-grid {
    gap: var(--s-12);
  }
  .category-card h3 {
    font-size: var(--fs-12);
  }
  .category-card p {
    font-size: var(--fs-12);
  }
  .guide-image {
    height: 230px;
  }
  .guide-card h3 {
    font-size: var(--fs-21);
  }
  .product-info {
    padding: var(--s-16);
  }
  .product-grid {
    gap: var(--s-14);
  } .choose-grid,
  .about-section {
    gap: var(--s-55);
  }
  .product-test {
    font-size: var(--fs-12);
  }
  .comparison-card {
    padding-inline: var(--s-20);
  }
}
@media (max-width: 960px) {
  h1 {
    letter-spacing: var(--ls-n2_5);
  }
  .desktop-nav {
    display: none;
  }
  .header-cta {
    display: inline-flex;
    margin-left: auto;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: 0;
    font-size: var(--fs-28);
  }
  .site-header {
    height: 76px;
  }
  .hero {
    padding-top: var(--s-35);
  }
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-30);
  }
  .hero-visual {
    min-height: 460px;
  }
  .hero-copy h1 {
    font-size: var(--fs-49);
  }
  .hero-floating {
    left: -12px;
    right: 18px;
    bottom: 20px;
    padding: var(--s-14);
    gap: var(--s-10);
  }
  .hero-floating strong {
    font-size: var(--fs-12);
  }
  .hero-floating small {
    font-size: var(--fs-12);
  }
  .floating-icon {
    padding: var(--s-7);
  }
  .hero-photo-label {
    font-size: var(--fs-12);
    left: 12px;
  }
  .hero-proof {
    gap: var(--s-11);
    font-size: var(--fs-12);
  }
  .hero-description {
    font-size: var(--fs-13);
  }
  .hero-secondary {
    padding: var(--s-4) 0;
  }
  .benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-23) var(--s-35);
  }
  .benefit h3 {
    font-size: var(--fs-12);
  }
  .benefit p {
    font-size: var(--fs-12);
  }
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-25) var(--s-18);
  }
  .category-art {
    padding: 0 var(--s-15);
  }
  .category-card h3 {
    font-size: var(--fs-14);
  }
  .category-card p {
    font-size: var(--fs-12);
  }
  .guide-grid,
  .article-grid {
    gap: var(--s-19);
  }
  .guide-image {
    height: 200px;
  }
  .guide-card h3,
  .article-card h3 {
    font-size: var(--fs-19);
  }
  .editorial-meta {
    font-size: var(--fs-12);
  }
  .guide-card p,
  .article-card p {
    font-size: var(--fs-12);
  }
  .comparison-grid {
    gap: var(--s-15);
  }
  .comparison-card {
    padding: var(--s-16);
  }
  .comparison-card h3 {
    font-size: var(--fs-19);
  }
  .comparison-card p {
    font-size: var(--fs-12);
  }
  .comparison-art {
    width: 120px;
    height: 85px;
    margin-bottom: 0;
  }
  .comparison-criterion {
    font-size: var(--fs-12);
  }
  .comparison-link {
    font-size: var(--fs-12);
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-22);
  }
  .product-visual {
    padding: var(--s-25) var(--s-30) var(--s-5);
  }
  .product-info {
    padding: var(--s-24);
  }

.product-test {
    font-size: var(--fs-12);
  }
  .choose-grid {
    gap: var(--s-30);
  }
  .choose-grid h2 {
    font-size: var(--fs-36);
  }
  .chooser {
    padding: var(--s-23);
  }
  .chooser h3 {
    font-size: var(--fs-24);
  }
  .chooser-fields {
    gap: var(--s-10);
    grid-template-columns: 1fr;
  }
  .choose-intro {
    font-size: var(--fs-12);
  }
  .criteria-list p {
    font-size: var(--fs-12);
  }
  .article-art {
    height: 175px;
  }
  .about-section {
    gap: var(--s-50);
  }
  .about-copy h2 {
    font-size: var(--fs-36);
  }
  .about-visual {
    height: 370px;
  }
  .footer-top {
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: var(--s-30);
  }
  .footer-top > div:last-child {
    grid-column: 2/4;
    display: flex;
    gap: var(--s-22);
    align-items: center;
  }
  .footer-top > div:last-child h3 {
    margin: 0;
  }
  .footer-top > div:last-child > a {
    margin: 0;
    font-size: var(--fs-12);
  }
  .footer-top .footer-back {
    margin: 0 !important;
  }
  .affiliation-note {
    display: block;
  }
  .affiliation-note a {
    margin-top: var(--s-12);
  }
  .section-heading .text-link {
    font-size: var(--fs-12);
  }
}
@media (max-width: 640px) {
  .container {
    width: calc(100% - 40px);
  }
  .header-inner {
    width: calc(100% - 32px);
  }
  .site-header {
    height: 69px;
  }
  .brand {
    font-size: var(--fs-22);
    gap: var(--s-8);
  }
  .brand > .brand-symbol {
    width: 33px;
    height: 33px;
  }
  .header-cta {
    display: none;
  }
  .menu-toggle {
    margin-left: auto;
  }
  .hero {
    padding-top: var(--s-32);
    padding-bottom: var(--s-32);
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--s-31);
  }
  .hero-copy {
    padding: 0;
  }
  .hero-eyebrow {
    font-size: var(--fs-12);
    margin-bottom: var(--s-18);
  }
  .hero-copy h1 {
    font-size: var(--fs-fluide-clamp-45px-12-7vw-67px);
    line-height: var(--lh-1_06);
    letter-spacing: var(--ls-n2_7);
  }
  .hero-description {
    font-size: var(--fs-14);
    max-width: 390px;
    margin-top: var(--s-20);
  }
  .hero-actions {
    margin-top: var(--s-24);
    gap: var(--s-18);
  }
  .hero-actions > .button {
    font-size: var(--fs-12);
    padding: var(--s-15) var(--s-18);
  }
  .hero-secondary {
    font-size: var(--fs-12);
  }
  .hero-proof {
    margin-top: var(--s-22);
    font-size: var(--fs-12);
    gap: var(--s-20);
  }
  .hero-visual {
    min-height: 350px;
    border-radius: var(--r-12);
  }
  .hero-visual > img {
    border-radius: var(--r-12);
    object-position: 58% center;
  }
  .hero-photo-label {
    top: 14px;
    left: 14px;
    font-size: var(--fs-12);
  }
  .hero-floating {
    left: 12px;
    right: 12px;
    bottom: 14px;
    padding: var(--s-14);
  }
  .hero-floating strong {
    font-size: var(--fs-12);
  }
  .hero-floating small {
    font-size: var(--fs-12);
  }
  .benefits {
    padding-block: var(--s-23);
    gap: var(--s-22) var(--s-13);
  }
  .benefit {
    align-items: start;
    gap: var(--s-8);
  }
  .benefit img.ui-icon {
    width: 20px;
    height: 20px;
  }
  .benefit h3 {
    font-size: var(--fs-12);
    line-height: var(--lh-1_3);
  }
  .benefit p {
    font-size: var(--fs-12);
    line-height: var(--lh-1_6);
  }
  .section {
    padding-top: var(--s-58);
    padding-bottom: 0;
  }
  .section-kicker {
    font-size: var(--fs-12);
    margin-bottom: var(--s-11);
  }
  .section-heading {
    display: block;
    margin-bottom: var(--s-25);
  }
  .section-heading h2 {
    font-size: var(--fs-29);
    letter-spacing: var(--ls-n1);
    max-width: 350px;
  }
  .section-heading > div > p:last-child:not(.section-kicker) {
    font-size: var(--fs-12);
    margin-top: var(--s-13);
  }
  .section-heading > .text-link {
    margin-top: var(--s-17);
    font-size: var(--fs-12);
  }
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-24) var(--s-15);
  }
  .category-art {
    padding: 0;
  }
  .category-card h3 {
    font-size: var(--fs-13);
    margin-top: var(--s-12);
  }
  .category-card p {
    font-size: var(--fs-12);
    margin-top: var(--s-5);
  }
  .guides-section {
    padding-bottom: var(--s-56);
  }
  .guide-grid {
    grid-template-columns: 1fr;
    gap: var(--s-35);
  }
  .guide-image {
    height: 260px;
  }
  .guide-card h3 {
    font-size: var(--fs-25);
    max-width: 100%;
  }
  .guide-card p {
    font-size: var(--fs-13);
    max-width: 100%;
  }
  .editorial-meta {
    font-size: var(--fs-12);
    margin-top: var(--s-16);
  }
  .guide-card > .text-link {
    margin-top: var(--s-16);
    font-size: var(--fs-12);
  }
  .comparison-section {
    padding-block: var(--s-43) var(--s-24);
  }
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: var(--s-15);
  }
  .comparison-card {
    padding: var(--s-22);
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: var(--s-15);
  }
  .comparison-art {
    grid-column: 2;
    grid-row: 1;
    width: 100px;
    height: 88px;
    margin-top: var(--s-18);
  }
  .comparison-card > div:last-child {
    grid-column: 1;
    grid-row: 1;
  }
  .comparison-criterion {
    font-size: var(--fs-12);
    margin-top: 0;
  }
  .comparison-card h3 {
    font-size: var(--fs-22);
    max-width: 230px;
  }
  .comparison-card p {
    font-size: var(--fs-12);
    margin-top: var(--s-10);
  }
  .comparison-link {
    font-size: var(--fs-12);
    gap: var(--s-10);
  }
  .product-grid {
    gap: var(--s-14);
  }
  .product-visual {
    min-height: 130px;
    padding: var(--s-33) var(--s-4) var(--s-4);
  }
  .product-badge {
    left: 9px;
    top: 10px;
    font-size: var(--fs-12);
    padding: var(--s-4) var(--s-6);
  }
  .product-info {
    padding: var(--s-14) var(--s-12);
  }
  .product-card h3 {
    font-size: var(--fs-19);
  }
  .product-brand {
    font-size: var(--fs-12);
  }




  .product-card ul {
    font-size: var(--fs-12);
    margin: var(--s-15) 0;
  }
  .product-card li {
    gap: var(--s-5);
    line-height: var(--lh-1_5);
  }
  .product-bottom {
    align-items: start;
    flex-direction: column;
    gap: var(--s-9);
  }
  .product-bottom strong {
    font-size: var(--fs-18);
  }
  .product-test {
    font-size: var(--fs-12);
  }
  .choose-section {
    margin-top: var(--s-55);
    padding-block: var(--s-45);
  }
  .choose-grid {
    grid-template-columns: 1fr;
    gap: var(--s-32);
  }
  .choose-grid h2 {
    font-size: var(--fs-39);
    letter-spacing: var(--ls-n1_5);
  }
  .choose-intro {
    font-size: var(--fs-13);
    max-width: 100%;
  }
  .criteria-list h3 {
    font-size: var(--fs-12);
  }
  .criteria-list p {
    font-size: var(--fs-12);
  }
  .chooser {
    padding: var(--s-25);
  }
  .chooser-fields {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-12);
  }
  .chooser select {
    padding: var(--s-12) var(--s-24) var(--s-12) var(--s-9);
    font-size: var(--fs-12);
  }
  .chooser h3 {
    font-size: var(--fs-27);
  }
  .article-grid {
    grid-template-columns: 1fr;
    gap: var(--s-34);
  }
  .article-art {
    height: 220px;
  }
  .article-card h3 {
    font-size: var(--fs-24);
  }
  .article-card p {
    font-size: var(--fs-12);
  }
  .article-card > .text-link {
    margin-top: var(--s-16);
  }
  .about-section {
    grid-template-columns: 1fr;
    padding-block: var(--s-56);
    gap: var(--s-33);
  }
  .about-visual {
    height: 300px;
  }
  .about-stamp {
    right: 12px;
    bottom: 15px;
  }
  .about-copy h2 {
    font-size: var(--fs-39);
  }
  .about-copy > p:not(.section-kicker) {
    font-size: var(--fs-13);
    margin-top: var(--s-18);
  }
  .site-footer {
    padding-top: var(--s-40);
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-32) var(--s-20);
  }
  .footer-brand {
    grid-column: 1/3;
  }
  .footer-brand p {
    margin-top: var(--s-18);
  }
  .footer-top > div:last-child {
    grid-column: 1/3;
    display: block;
  }
  .footer-top > div:last-child h3 {
    margin-bottom: var(--s-16);
  }
  .footer-top > div:last-child > a {
    margin-top: var(--s-11);
    font-size: var(--fs-12);
  }
  .footer-top .footer-back {
    margin-top: var(--s-19) !important;
  }
  .affiliation-note p {
    font-size: var(--fs-12);
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--s-13);
    font-size: var(--fs-12);
  }
  .footer-bottom > div {
    gap: var(--s-17);
  }
  .chooser-result {
    align-items: start;
  }
  .chooser-result > .equipment-art {
    width: 60px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* Export adjustments: readable sizes, AA contrast and Amazon affiliation. */
:root {
  --muted: var(--c-text-muted);
  --purchase: var(--c-purchase);
  --purchase-hover: var(--c-purchase-hover);
  --control-border: var(--c-control-border);
}
[hidden] { display: none !important; }
.ui-icon { width: 19px;height: 19px; }
.brand-symbol { width: 38px;height: 38px;flex-shrink: 0; } .button:not(.button-outline):not(.button-purchase) .ui-icon,
.comparison-section .comparison-link .ui-icon,
.comparison-section .text-link .ui-icon,
.site-footer .ui-icon { filter: brightness(0) invert(1); }
.hero-photo-label,.hero-floating { background: var(--c-white); } .hero-proof,.editorial-meta>span:last-child,.product-card ul,.product-brand,
.product-bottom small,.chooser-note,.time-pill,.product-info p { color: var(--muted); }
.hero-description,.guide-card p,.article-card p,.about-copy>p:not(.section-kicker),
.choose-intro,.comparison-card p { font-size: var(--fs-15);line-height: var(--lh-1_75); } .benefit p,.category-card p,.criteria-list p { font-size: var(--fs-13);line-height: var(--lh-1_65); }
.benefit h3,.criteria-list h3 { font-size: var(--fs-14); }
.product-card ul { font-size: var(--fs-14);line-height: var(--lh-1_65); }
.product-card h3 { line-height: var(--lh-1_3); }
.product-card { display: flex;flex-direction: column; }
.product-info { display: flex;flex-direction: column;flex: 1; }
.product-info ul { flex: 1; }
.product-bottom { min-height: 44px; }
.product-test,.text-link,.hero-secondary,.comparison-link { min-height: 30px; } .button,.chooser select { min-height: 44px;font-size: var(--fs-14); }
.button-small { font-size: var(--fs-12); }
.button-purchase { background: var(--purchase);border: 1px solid var(--c-purchase-border);color: var(--ink);width: 100%;justify-content: space-between;margin-top: var(--s-16);gap: var(--s-12);padding: var(--s-13) var(--s-16); }
.button-purchase:hover { background: var(--purchase-hover); }
.product-info .affiliate-disclosure { font-size: var(--fs-12);line-height: var(--lh-1_6);color: var(--muted);margin-top: var(--s-10); } .chooser select { border-color: var(--control-border); }
.chooser label { font-size: var(--fs-13); }
.chooser-result strong { font-size: var(--fs-15); }
.chooser-result p { font-size: var(--fs-14);line-height: var(--lh-1_7); }
.chooser-result a { font-size: var(--fs-13); }
.chooser-result:focus { outline: 3px solid var(--green);outline-offset: 6px; }
.chooser-fields { grid-template-columns: 1fr; }
.hero-actions { align-items: flex-start; }
.hero-secondary { align-self: center; }
button:disabled { opacity: 1;background: var(--c-disabled-surface);color: var(--c-disabled-ink);border-color: var(--c-button-disabled-6b796c); }
button:disabled .ui-icon { filter: none !important; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
 outline: 3px solid var(--c-editorial-action);outline-offset: 4px;box-shadow: var(--sh-focus-on-light);
}
.site-footer a:focus-visible,.comparison-section a:focus-visible { outline-color: var(--c-accent);box-shadow: 0 0 0 var(--s-4) var(--c-footer); }
.affiliation-note p { color: var(--c-footer-disclosure);font-size: var(--fs-13);line-height: var(--lh-1_75); }
.footer-bottom,.footer-brand>span { color: var(--c-footer-secondary); }
.brand-light .brand-symbol { filter: none; }
.mobile-nav { display: none; }
html.js .menu-toggle { display: none; }
.noscript-note { padding: var(--s-20);background: var(--c-sage);color: var(--c-ink); }
@media(max-width:1200px) { .desktop-nav {gap: var(--s-13);} .desktop-nav a {font-size: var(--fs-12);} }
@media(max-width:960px) {
 html.js .menu-toggle {display: flex;}
 .mobile-nav:not([hidden]) {display: block;}
 html:not(.js) .site-header {height: auto;position: static;}
 html:not(.js) .header-inner {min-height: 76px;}
 .hero-proof {flex-wrap: wrap;}
 .benefits {gap: var(--s-25);}
 .hero-floating {left: 12px;right: 12px;}
 .hero-floating strong {font-size: var(--fs-12);}
 .hero-floating small {font-size: var(--fs-12);}
 .hero-photo-label {max-width: calc(100% - 24px);font-size: var(--fs-12);}
 .comparison-card {padding: var(--s-18);}
 .comparison-art {margin-bottom: var(--s-12);}
 .comparison-card p {font-size: var(--fs-14);}
 .comparison-card h3 {font-size: var(--fs-21);}
 .guide-card p,.article-card p {font-size: var(--fs-14);}
 .editorial-meta {flex-wrap: wrap;font-size: var(--fs-12);}
 .guide-card h3,.article-card h3 {font-size: var(--fs-22);}
 .footer-top>div:last-child {flex-wrap: wrap;}
}
@media(max-width:640px) {
 .brand-symbol {width: 33px;height: 33px;}
 .hero-copy h1 {font-size: var(--fs-hero-mobile);}
 .hero-proof {gap: var(--s-12);}
 .benefit {gap: var(--s-8);}
 .benefit h3 {font-size: var(--fs-13);}
 .benefit p {font-size: var(--fs-12);}
 .category-card h3 {font-size: var(--fs-15);}
 .category-card p {font-size: var(--fs-12);}
 .category-arrow {right: 8px;top: 8px;}
 .product-grid {grid-template-columns: 1fr;gap: var(--s-25);}
 .product-visual {padding: var(--s-30) var(--s-43) 0;}
 .product-badge {font-size: var(--fs-12);top: 15px;left: 15px;}
 .product-info {padding: var(--s-22);}
 .product-card h3 {font-size: var(--fs-25);}
 .product-bottom {align-items: center;flex-direction: row;}
 .product-test {font-size: var(--fs-14);}
 .product-brand {font-size: var(--fs-12);}
 .comparison-card {grid-template-columns: 1fr;}
 .comparison-art {grid-column: 1;grid-row: 1;margin: 0 0 var(--s-12) auto;width: 115px;height: 79px;}
 .comparison-card>div:last-child {grid-column: 1;grid-row: 2;}
 .comparison-card h3 {max-width: none;font-size: var(--fs-24);}
 .comparison-card p {max-width: none;}
 .chooser {padding: var(--s-22);}
 .chooser-fields {grid-template-columns: 1fr;}
 .chooser select {font-size: var(--fs-14);}
 .chooser-result {flex-direction: column;}
 .chooser-result>.equipment-art {width: 110px;}
 .guide-card h3,.article-card h3 {font-size: var(--fs-25);}
 .hero-floating {padding: var(--s-13);gap: var(--s-9);}
 .hero-floating strong {font-size: var(--fs-12);line-height: var(--lh-1_5);}
 .hero-floating small {font-size: var(--fs-12);line-height: var(--lh-1_5);}
 .floating-icon {padding: var(--s-7);}
 .affiliation-note a {white-space: normal;}
 .footer-bottom>div {flex-wrap: wrap;}
}

/* Keep readable header colors independent of the content beneath the sticky bar. */
.site-header { background: var(--paper); }

/* Ajouts du site au design externe (mission 20261014-design-externe). cardiochezsoi.css est dérivée de la maquette et ne s'édite
   pas ; ce fichier porte ce que la maquette ne montre pas : menu par appareil avec « Bientôt », déclinaison sur les pages de
   sélection, fiche, comparatif et guide, composants fonctionnels du site. Couleurs, tailles de police, espacements, rayons et
   ombres : var(--…) seulement (jetons de design/tokens.json, /styles/jetons.css). L'ambre (--c-purchase) ne colore que
   .button-purchase, le bouton vers Amazon : contrôle « couleur action hors bouton Amazon » du garde-fou. */

/* ---------- Mise en page commune ---------- */
.page { max-width: var(--layout-container-max); margin: 0 auto; padding-inline: var(--layout-mobile-gutter); }
@media (min-width: 641px) { .page { padding-inline: var(--layout-medium-gutter); } }
@media (min-width: 961px) { .page { padding-inline: var(--layout-desktop-gutter); } }
main { max-width: 46rem; margin: 0 auto; padding-bottom: var(--s-58); }
body[data-type-page="accueil"] .page { max-width: none; padding-inline: 0; }
body[data-type-page="accueil"] main { max-width: none; padding-bottom: 0; }
.evitement { position: absolute; left: -999px; }
.inactif { color: var(--muted); cursor: default; }
a { text-underline-offset: 0.2em; }
main a:not(.button):not(.text-link):not(.product-test):not(.comparison-link):not(.category-card):not(.hero-floating):not(.hero-secondary):not(.guide-image):not(.article-art):not(.rubrique-lien):not(.carte-lien):not(.carte-photo-image),
.faq a, .a-lire-aussi a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; }
main a:not(.button):hover { color: var(--c-editorial-action-hover); }
.container { margin-inline: auto; }

/* ---------- En-tête : menu par appareil ---------- */
.header-inner { width: min(1400px, calc(100% - 72px)); }
.desktop-nav > ul { display: flex; align-items: center; justify-content: center; gap: var(--s-23); list-style: none; margin: 0; padding: 0; }
.desktop-nav { min-width: 0; }
.nav-appareil { position: relative; display: flex; flex-direction: column; align-items: flex-start; font-size: var(--fs-12); font-weight: var(--fw-navigation); line-height: var(--lh-1_2); white-space: nowrap; }
.nav-appareil > a, .nav-appareil > span:first-child { display: inline-flex; align-items: center; min-height: var(--layout-touch-control-min-height); }
.nav-appareil > a[aria-current] { color: var(--green); }
.nav-appareil > a[aria-current]:after { width: 100%; }
.nav-appareil.inactif { gap: 0; justify-content: center; }
.nav-appareil.inactif > span:first-child { min-height: 0; }
.pastille-bientot {
  display: inline-block; font-size: var(--fs-12); line-height: var(--lh-1_4); font-weight: var(--fw-navigation); color: var(--muted);
  background: var(--c-sage); border-radius: var(--r-pill); padding: 0 var(--s-8); white-space: nowrap; vertical-align: middle;
}
.nav-appareil.inactif .pastille-bientot { margin-top: var(--s-4); }
.desktop-nav .nav-sous {
  display: none; position: absolute; top: 100%; left: calc(-1 * var(--s-16)); min-width: 17rem; list-style: none; margin: 0;
  padding: var(--s-8) var(--s-16); background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); z-index: 40;
  box-shadow: var(--sh-chooser);
}
.desktop-nav .nav-appareil:hover .nav-sous, .desktop-nav .nav-appareil:focus-within .nav-sous { display: block; }
.nav-sous li { display: block; }
.nav-sous a { display: block; padding: var(--s-8) 0; font-size: var(--fs-13); white-space: normal; }
.nav-sous a:after { display: none; }
.mobile-nav { max-height: calc(100dvh - 76px); overflow: auto; }
.mobile-nav ul { list-style: none; margin: 0; padding: var(--s-8) var(--s-20) var(--s-20); }
.mobile-nav ul ul { padding: 0 0 var(--s-8) var(--s-16); }
.nav-mobile-appareil { display: flex; align-items: center; gap: var(--s-8); min-height: var(--layout-touch-control-min-height); font-size: var(--fs-15); font-weight: var(--fw-emphasis); }
.mobile-nav ul ul a { display: flex; align-items: center; min-height: var(--layout-touch-control-min-height); font-size: var(--fs-14); color: var(--muted); }
.mobile-nav li.inactif { display: flex; align-items: center; gap: var(--s-8); }
.mobile-nav > ul > li { border-bottom: 1px solid var(--line); }
.mobile-nav { background: var(--paper); box-shadow: var(--sh-mobile-menu); border-bottom: 1px solid var(--line); position: absolute; left: 0; right: 0; top: 100%; }
@media (max-width: 960px) { .mobile-nav:not([hidden]) { display: block; } }
@media (min-width: 961px) { .mobile-nav { display: none !important; } }
@media (max-width: 1200px) { .desktop-nav > ul { gap: var(--s-15); } .header-inner { width: calc(100% - 48px); } }
@media (max-width: 960px) { .header-cta { display: inline-flex; margin-left: auto; } .menu-toggle { margin-left: 0; width: 44px; height: 44px; } }
@media (max-width: 640px) { .header-cta { display: none; } .menu-toggle { margin-left: auto; } .header-inner { width: calc(100% - 32px); } }
html:not(.js) .site-header { position: relative; }

/* ---------- Pied de page ---------- */
.footer-top { grid-template-columns: 1.65fr 1fr 1fr; }
.footer-top > div:not(:first-child) > a, .footer-top > div:not(:first-child) > .footer-bientot { display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-13); color: var(--c-footer-secondary); margin-top: var(--s-11); min-height: var(--s-24); }
.footer-bientot .pastille-bientot { background: transparent; border: 1px solid var(--c-affiliation-note-385348); color: var(--c-footer-secondary); }
.footer-top > div:last-child { grid-column: auto; display: block; }
.footer-top > div:last-child h3 { margin-bottom: var(--s-20); }
.footer-top > div:last-child > a { margin-top: var(--s-11); }
.footer-bottom span { color: var(--c-footer-secondary); }
@media (max-width: 960px) { .footer-top { grid-template-columns: 1.35fr 1fr 1fr; } }
@media (max-width: 640px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / 3; } .footer-top > div:last-child { grid-column: 1 / 3; } }

/* ---------- Accueil ---------- */
.hero-proof { font-size: var(--fs-14); }
.hero-proof > span > span { color: var(--muted); }
.hero-photo-label b { font-weight: inherit; }
.hero-floating small { color: var(--muted); }
.hero-floating small { display: block; font-size: var(--fs-13); }
.category-card { display: block; }
.category-card p { color: var(--muted); }
.category-card.inactif .category-art { background: var(--c-category-art-eff1e9); opacity: 1; }
.category-card.inactif h3 { color: var(--muted); }
.category-card.inactif img { filter: grayscale(0.6); }
.category-art { padding-block: var(--s-10); }
.product-badge { max-width: calc(100% - var(--s-28)); line-height: var(--lh-1_3); background: var(--c-white); }
.product-card ul { list-style: none; }
.product-card li:before { content: ""; width: var(--s-8); height: var(--s-8); margin-top: var(--s-8); border-radius: var(--r-circle); background: var(--c-product-card-li-before-607c56); flex-shrink: 0; }
.product-card li strong { color: var(--ink); font-weight: var(--fw-emphasis); }
.product-card .achat { margin-top: auto; }
.product-info > .product-bottom { margin-bottom: 0; }
.product-card h3 a { color: var(--ink); text-decoration: none; }
.guide-image .illustration-scene { min-height: var(--s-104); }
.chooser-liens { list-style: none; margin: var(--s-24) 0 0; padding: 0; display: grid; gap: var(--s-8); font-size: var(--fs-14); }
.chooser-liens a { display: flex; align-items: center; min-height: var(--layout-touch-control-min-height); color: var(--green); }
html.js .chooser-liens { display: none; }
html:not(.js) .chooser form { display: none; }
.chooser-fields { grid-template-columns: 1fr; }
.chooser-result { display: block; }
.chooser-result strong { display: block; color: var(--ink); font-size: var(--fs-15); }
.chooser-result p { font-size: var(--fs-14); }
.chooser-result a { color: var(--green); font-size: var(--fs-13); text-decoration: underline; }
.about-stamp { max-width: calc(100% - var(--s-24)); }
.about-copy > p:not(.section-kicker) { color: var(--muted); }
.about-copy p a { color: var(--green); text-decoration: underline; }
.about-visual > img { object-fit: cover; }
.comparison-section .comparison-card h3 a { color: inherit; }
.comparison-card > div:last-child { min-width: 0; }
.comparison-card h3, .comparison-card p { overflow-wrap: break-word; }

/* ---------- Composants communs ---------- */
.button-purchase { margin-top: var(--s-16); }
.achat { display: flex; flex-direction: column; margin-top: var(--s-8); }
.affiliate-disclosure { margin: var(--s-10) 0 0; font-size: var(--fs-12); line-height: var(--lh-1_6); color: var(--muted); }
/* Autres marchands (mission 20261016-multi-marchands) : « Aussi chez », sous le bouton Amazon, liens secondaires sobres (contour
   et texte encre, jamais le jeton action ambre, réservé à .button-purchase). */
.aussi-chez { margin-top: var(--s-12); }
.aussi-chez-titre { margin: 0 0 var(--s-6); font-size: var(--fs-13); line-height: var(--lh-1_4); color: var(--muted); }
.aussi-chez ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-8); }
.aussi-chez .lien-marchand { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--s-6) var(--s-12); border: 1px solid var(--line); border-radius: var(--r-8); background: var(--c-white); color: var(--ink); font-size: var(--fs-14); font-weight: var(--fw-emphasis); text-decoration: none; }
.aussi-chez .lien-marchand:hover { background: var(--c-sage); text-decoration: underline; }
.aussi-chez .lien-marchand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.aussi-chez .affiliate-disclosure { margin-top: var(--s-8); }
.produit .aussi-chez { max-width: 22rem; }
.barre-achat .aussi-chez { grid-column: 1 / -1; margin-top: var(--s-8); }
.barre-achat .aussi-chez-titre { display: inline; margin: 0 var(--s-8) 0 0; }
.barre-achat .aussi-chez ul { display: inline-flex; vertical-align: middle; }
.barre-achat .aussi-chez .lien-marchand { min-height: 2.75rem; }
body.avec-barre:has(.barre-achat .aussi-chez) { padding-bottom: calc(var(--s-96) + var(--s-96)); }
@media (min-width: 961px) {
  body.avec-barre:has(.barre-achat .aussi-chez) { padding-bottom: 0; }
  .barre-achat .aussi-chez { margin-top: var(--s-12); }
  .barre-achat .aussi-chez-titre { display: block; margin: 0 0 var(--s-6); }
  .barre-achat .aussi-chez ul { display: flex; }
}
.button img.ui-icon { filter: brightness(0) invert(1); }
.button-purchase img.ui-icon, .button-purchase .ui-icon { filter: none; }
.button.button-purchase { color: var(--ink); }
.fil-ariane { padding: var(--s-16) 0 0; font-size: var(--fs-13); color: var(--muted); }
.fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); }
.fil-ariane li + li::before { content: "›"; margin-right: var(--s-8); color: var(--muted); }
.fil-ariane a { color: var(--muted); text-decoration: none; }
.fil-ariane a:hover { color: var(--ink); text-decoration: underline; }
.fil-ariane [aria-current] { color: var(--ink); }
.mise-a-jour { font-size: var(--fs-13); color: var(--muted); margin-top: var(--s-48); }
.note-provisoire { font-size: var(--fs-14); color: var(--muted); }
.brouillon { border: 2px dashed var(--c-disabled-ink); background: var(--c-sage); padding: var(--s-16); border-radius: var(--r-card); margin: var(--s-16) 0; }
.brouillon p { margin: 0; color: var(--ink); }
.brouillon-etiquette { display: inline-block; font-size: var(--fs-12); font-weight: var(--fw-emphasis); text-transform: uppercase; color: var(--ink); margin-right: var(--s-8); }

/* ---------- Bande d'ouverture des pages de contenu ---------- */
.titre-page.ouverture {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-16); row-gap: var(--s-8);
  margin: var(--s-16) 0 var(--s-24); padding: var(--s-20); background: var(--c-sage); border-radius: var(--r-hero-mobile);
}
.titre-page .ouverture-texte { display: contents; }
.titre-page .surtitre { grid-column: 1; grid-row: 1; margin: 0; color: var(--green); font-size: var(--fs-13); font-weight: var(--fw-headings); }
.titre-page h1 { grid-column: 1 / -1; grid-row: 2; font-size: var(--fs-section-title); letter-spacing: var(--ls-n1_55); margin: 0; }
.titre-page .ouverture-illu { grid-column: 2; grid-row: 1; display: flex; gap: var(--s-8); }
.titre-page .ouverture-illu .equipment-art { width: var(--s-80); height: auto; }
.titre-page .ouverture-illu.duo .equipment-art { width: var(--s-64); }
.titre-page > .brouillon, .titre-page > .note-provisoire { grid-column: 1 / -1; }
.titre-page .ouverture-silhouette { display: none; margin: 0; }
.ouverture-silhouette .schema { max-width: 100%; }
body[data-type-page="comparatif"] .titre-page.ouverture { background: var(--c-comparison-section); }
body[data-type-page="comparatif"] .titre-page h1 { color: var(--c-comparison-heading); }
body[data-type-page="comparatif"] .titre-page .surtitre { color: var(--c-comparison-criterion); }
body[data-type-page="comparatif"] .titre-page .ouverture-illu .equipment-art { background: var(--c-comparison-art-e5ecdb); border-radius: var(--r-8); padding: var(--s-4); }
.fil-ariane li[aria-current] { display: none; }
@media (min-width: 961px) {
  .titre-page.ouverture { display: flex; padding: var(--s-48); border-radius: var(--r-hero-desktop); gap: var(--s-48); justify-content: space-between; margin-top: var(--s-24); }
  .titre-page .ouverture-texte { display: block; flex: 1 1 28rem; }
  .titre-page .surtitre { margin-bottom: var(--s-13); }
  .titre-page h1 { font-size: var(--fs-44); letter-spacing: var(--ls-n1_7); line-height: var(--lh-1_13); }
  .titre-page .ouverture-illu .equipment-art { width: var(--s-96); }
  .titre-page .ouverture-illu { flex: none; }
  .titre-page .ouverture-silhouette { display: block; flex: 0 1 22rem; }
  .fil-ariane li[aria-current] { display: list-item; }
}

/* ---------- Blocs ---------- */
.bloc { margin: var(--s-48) 0; }
.bloc-titre { scroll-margin-top: var(--s-104); margin-bottom: var(--s-16); }
.bloc h2, .bloc-titre { font-size: var(--fs-section-title); letter-spacing: var(--ls-n1_55); }
main .bloc p { color: var(--ink); line-height: var(--lh-1_75); margin-bottom: var(--s-16); }
.sommaire ol { margin: 0; padding: var(--s-16) var(--s-24) var(--s-16) var(--s-40); columns: 2 12rem; background: var(--c-sage); border-radius: var(--r-card); }
.sommaire li { padding: var(--s-4) 0; font-size: var(--fs-14); }
.bloc-reponse, .bloc-reponse-directe { display: flex; flex-direction: column; }
.bloc-reponse > .bloc-titre, .bloc-reponse-directe > .bloc-titre {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.bloc-reponse > p:first-of-type, .bloc-reponse-directe > p:first-of-type { order: -2; }
.bloc-reponse > .produit, .bloc-reponse-directe > .produit { order: -1; margin-top: 0; }
.bloc-reponse > p, .bloc-reponse-directe > p { margin: 0 0 var(--s-16); }
@media (min-width: 961px) {
  .bloc-reponse > .bloc-titre, .bloc-reponse-directe > .bloc-titre { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; order: -3; }
  .bloc-reponse > p:first-of-type, .bloc-reponse-directe > p:first-of-type { font-size: var(--fs-19); line-height: var(--lh-1_6); }
}

/* ---------- Chiffres-clés ---------- */
.chiffres { list-style: none; margin: var(--s-16) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); }
.chiffres li { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.chiffre-valeur { font-weight: var(--fw-headings); color: var(--ink); font-size: var(--fs-25); line-height: var(--lh-1); letter-spacing: var(--ls-n0_7); white-space: nowrap; }
.chiffre-unite { font-size: var(--fs-13); font-weight: var(--fw-navigation); color: var(--muted); letter-spacing: 0; }
.chiffre-valeur .chiffre-unite { white-space: normal; }
.chiffre-libelle, .chiffre-rang { font-size: var(--fs-13); line-height: var(--lh-1_4); color: var(--muted); }
.chiffre-rang { color: var(--green); font-weight: var(--fw-emphasis); }
.chiffre-inline { font-weight: var(--fw-emphasis); color: var(--ink); }
.chiffres-seuils { grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--c-sage); border-radius: var(--r-card); padding: var(--s-24) var(--s-16); }
@media (min-width: 641px) { .chiffre-valeur { font-size: var(--fs-31); } }

/* ---------- Encadré produit ---------- */
.produit {
  background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-22);
  margin: var(--s-24) 0; display: flex; flex-direction: column; gap: var(--s-8);
}
.produit-choix { background: var(--c-sage); border-color: var(--c-divider); border-radius: var(--r-hero-desktop); padding: var(--s-24); }
.produit-tete { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.produit-surtitre { margin: 0; font-size: var(--fs-12); font-weight: var(--fw-headings); color: var(--ink); background: var(--c-white); border-radius: var(--r-4); padding: var(--s-4) var(--s-8); }
main .produit .produit-surtitre { color: var(--ink); margin: 0; }
.produit-rang { min-width: var(--s-30); height: var(--s-30); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-headings); color: var(--ink); background: var(--c-sage); border-radius: var(--r-circle); font-size: var(--fs-14); }
.produit-nom { font-size: var(--fs-25); line-height: var(--lh-1_3); letter-spacing: var(--ls-n0_6); margin: 0; }
.produit-nom a { color: var(--ink); text-decoration: none; }
.produit-nom a:hover { color: var(--green); text-decoration: underline; }
.produit-silhouette { margin: 0; }
.produit .chiffres { margin: var(--s-8) 0; }
.pour-pas-pour { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-8); font-size: var(--fs-14); line-height: var(--lh-1_5); }
.pour-pas-pour li { display: flex; gap: var(--s-8); align-items: baseline; }
.pour-pas-pour .signe { flex: none; font-weight: var(--fw-emphasis); min-width: 4.6rem; }
.pour .signe { color: var(--green); }
.pas-pour .signe { color: var(--muted); }
.produit-forts { margin: 0; padding-left: var(--s-20); font-size: var(--fs-14); line-height: var(--lh-1_6); color: var(--muted); }
.produit-defaut { margin: 0; font-size: var(--fs-14); line-height: var(--lh-1_6); }
main .bloc .produit p { margin-bottom: 0; }
.grille-produits { display: grid; gap: var(--s-20); }
@media (min-width: 641px) { .grille-produits { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .grille-produits .produit { margin: 0; } }
.fiche-courte { margin: var(--s-24) 0 var(--s-48); }
.fiche-courte .produit { margin-bottom: var(--s-16); }
.produit .achat, .prenez-carte .achat { max-width: 22rem; }
.produit .button-purchase, .prenez-carte .button-purchase { width: 100%; }

/* ---------- Tableaux : défilement interne seulement ---------- */
.tableau-defilant { overflow-x: auto; margin: var(--s-16) 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--c-white); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-14); line-height: var(--lh-1_5); }
caption { text-align: left; font-weight: var(--fw-emphasis); padding: var(--s-16); caption-side: top; color: var(--ink); }
th, td { padding: var(--s-10) var(--s-16); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
thead th { background: var(--c-sage); font-size: var(--fs-13); font-weight: var(--fw-emphasis); color: var(--ink); }
tbody th { font-weight: var(--fw-navigation); color: var(--ink); }
tbody th a { color: var(--green); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.tableau-classement { table-layout: auto; }
.tableau-classement th, .tableau-classement td { overflow-wrap: break-word; }
.tableau-classement .col-large { display: none; }
.tableau-classement .chiffre-decisif { color: var(--green); font-weight: var(--fw-emphasis); }
@media (min-width: 768px) { .tableau-classement .col-large { display: table-cell; } }

/* ---------- « Prenez A si » ---------- */
.prenez { margin: var(--s-24) 0; }
.prenez-titre { margin: 0 0 var(--s-12); }
.prenez-grille { display: grid; gap: var(--s-16); }
.prenez-carte { background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-22); display: flex; flex-direction: column; gap: var(--s-8); }
.prenez-carte p { margin: 0; }
.prenez-si { font-size: var(--fs-19); line-height: var(--lh-1_4); font-weight: var(--fw-headings); color: var(--ink); }
.prenez-si strong { font-weight: var(--fw-headings); color: var(--green); }
.prenez-carte ul { margin: 0; padding-left: var(--s-20); font-size: var(--fs-15); line-height: var(--lh-1_6); }
.prenez-carte li { margin: var(--s-4) 0; }
.lien-fleche { font-size: var(--fs-14); font-weight: var(--fw-emphasis); }
@media (min-width: 641px) { .prenez-grille { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }

/* ---------- Critères, listes, colonnes ---------- */
.criteres { display: grid; gap: var(--s-8); margin: 0; }
.criteres div { background: var(--c-sage); border-radius: var(--r-card); padding: var(--s-16); }
.criteres dt { font-weight: var(--fw-emphasis); }
.criteres dd { margin: 0; color: var(--muted); }
.deux-colonnes { display: grid; gap: var(--s-16); }
.deux-colonnes > div { background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-16) var(--s-24); }
.deux-colonnes ul { margin: 0; padding-left: var(--s-20); }
@media (min-width: 641px) { .deux-colonnes { grid-template-columns: 1fr 1fr; } }
.liens-suite, .liens-facettes, .liste-marques { padding-left: var(--s-24); }
.liens-suite li, .liens-facettes li, .liste-marques li { margin: var(--s-8) 0; }
.a-lire-aussi { margin-top: var(--s-24); padding: var(--s-16) var(--s-24); background: var(--c-sage); border-radius: var(--r-card); }
.a-lire-aussi h3 { font-size: var(--fs-16); margin-bottom: var(--s-8); }
.a-lire-aussi ul { margin: 0; padding-left: var(--s-20); }
.source { font-size: var(--fs-13); color: var(--muted); }

/* ---------- Essais publiés ---------- */
.experiences ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-16); }
.experiences li { background: var(--c-white); border: 1px solid var(--line); border-left: var(--s-4) solid var(--green); border-radius: var(--r-card); padding: var(--s-20); font-size: var(--fs-15); line-height: var(--lh-1_65); }
@media (min-width: 641px) { .experiences ul { grid-template-columns: 1fr 1fr; } }

/* ---------- FAQ repliable ---------- */
.faq { display: grid; gap: var(--s-8); }
.faq-item { background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-12) var(--s-20); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); min-height: var(--layout-touch-control-min-height); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: var(--fs-24); font-weight: var(--fw-navigation); color: var(--green); flex: none; }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary h3 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-1_4); font-weight: var(--fw-emphasis); letter-spacing: 0; }
.faq-item p { margin: var(--s-8) 0 0; color: var(--muted); }
main .faq-item p { color: var(--muted); }

/* ---------- Schémas et silhouettes cotées : traits ink, cotes vertes ---------- */
.schemas { display: grid; gap: var(--s-16); margin: var(--s-16) 0; }
.schema-figure { margin: 0; padding: var(--s-16); background: var(--c-white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.schema-figure figcaption { font-size: var(--fs-13); color: var(--muted); margin-top: var(--s-8); }
.schema { display: block; width: 100%; height: auto; }
.schema text { font-weight: var(--fw-navigation); font-size: var(--fs-12); fill: var(--ink); }
.schema .repere-texte { font-weight: var(--fw-body); fill: var(--muted); }
.schema .cote-texte { font-weight: var(--fw-emphasis); fill: var(--green); }
.schema .contour { fill: var(--c-sage); stroke: var(--ink); stroke-width: 2; }
.schema .contour.plie { fill: none; stroke-dasharray: 5 4; stroke: var(--muted); }
.schema .bande { fill: var(--c-white); stroke: var(--muted); stroke-width: 1.5; }
.schema .cote { stroke: var(--green); stroke-width: 1.5; fill: none; }
.schema .sol, .schema .repere { stroke: var(--muted); stroke-width: 1; fill: none; }
.schema .sol { stroke-width: 2; }
.schema .jauge-fond { fill: var(--c-sage); }
.schema .jauge-valeur { fill: var(--green); }
.schema .silhouette { fill: none; stroke-width: 2.5; }
.schema .silhouette-1 { stroke: var(--ink); fill: var(--c-sage); }
.schema .silhouette-2 { stroke: var(--green); stroke-dasharray: 7 4; }
.pictos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-16) var(--s-24); }
.pictos li { display: flex; align-items: center; gap: var(--s-8); font-weight: var(--fw-navigation); }
.picto { width: 44px; height: 40px; flex: none; }
.picto .trait-icone { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.picto .trait-icone.fin { stroke: var(--green); stroke-dasharray: 4 3; }
.picto .plein-icone { fill: var(--green); }

/* ---------- Colonne d'achat : barre collante en mobile, colonne fixe en grand écran ---------- */
.colonne-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; }
.barre-achat {
  background: var(--c-white); border-top: 1px solid var(--line); box-shadow: 0 calc(-1 * var(--s-4)) var(--s-25) var(--c-mobile-nav-183b3512);
  padding: var(--s-8) var(--s-20); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-16); align-items: center;
}
.barre-silhouette, .barre-chiffres { display: none; }
.barre-identite { min-width: 0; }
.barre-nom { margin: 0; font-weight: var(--fw-emphasis); font-size: var(--fs-14); line-height: var(--lh-1_4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.barre-info { margin: 0; font-size: var(--fs-12); line-height: var(--lh-1_4); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-achat .achat { display: contents; }
.barre-achat .button-purchase { width: auto; margin-top: 0; padding: var(--s-10) var(--s-16); }
.barre-achat .affiliate-disclosure { grid-column: 1 / -1; margin-top: var(--s-4); }
body.avec-barre { padding-bottom: calc(var(--s-96) + var(--s-8)); }
@media (min-width: 961px) {
  body.avec-barre { padding-bottom: 0; }
  .colonne-achat { position: sticky; top: var(--s-104); left: auto; right: auto; bottom: auto; margin-top: var(--s-24); z-index: auto; }
  .barre-achat { display: flex; flex-direction: column; gap: var(--s-20); padding: var(--s-24); border: 1px solid var(--line); border-radius: var(--r-hero-desktop); box-shadow: none; background: var(--c-sage); }
  .barre-silhouette { display: block; }
  .barre-chiffres { display: grid; grid-template-columns: 1fr; gap: var(--s-16); margin: 0; }
  .barre-chiffres .chiffre-valeur { font-size: var(--fs-36); }
  .barre-nom { font-size: var(--fs-22); line-height: var(--lh-1_25); white-space: normal; letter-spacing: var(--ls-n0_6); }
  .barre-info { display: none; }
  .barre-achat .achat { display: flex; }
  .barre-achat .button-purchase { width: 100%; margin-top: var(--s-8); }
  .page.avec-colonne { display: grid; grid-template-columns: minmax(0, 1fr) 23.75rem; column-gap: var(--s-48); align-items: start; }
  .page.avec-colonne .fil-ariane { grid-column: 1 / -1; }
  .page.avec-colonne main { max-width: 48rem; margin: 0; }
}
@media (min-width: 961px) {
  .page:not(.avec-colonne) main { max-width: none; }
  .page:not(.avec-colonne) main > :not(.titre-page) { max-width: 46rem; }
  body[data-type-page="accueil"] .page:not(.avec-colonne) main > :not(.titre-page) { max-width: none; }
}
.grille-produits .produit .chiffre-valeur { font-size: var(--fs-25); }

/* ---------- Images de produits (mission 20261015-images-produits) ---------- */
.image-produit { margin: 0; }
.image-produit img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--c-white); border-radius: var(--r-8); }
.image-credit { margin-top: var(--s-4); font-size: var(--fs-13); color: var(--ink); opacity: .75; }
.titre-page .ouverture-illu.ouverture-produit { grid-column: 1 / -1; grid-row: 3; flex-direction: column; gap: var(--s-12); }
.titre-page .ouverture-photo { max-width: 22rem; }
.product-visual .carte-image img { aspect-ratio: 4 / 3; border-radius: var(--r-8) var(--r-8) 0 0; }
.produit .image-produit { max-width: 22rem; margin: var(--s-8) 0; }
@media (min-width: 961px) {
  .titre-page .ouverture-illu.ouverture-produit { grid-column: auto; grid-row: auto; flex: 0 1 22rem; }
}

/* ---------- Zones tactiles 44 × 44 px (mission 20261016-a11y), contrôle : 03-outils/zones-tactiles.mjs ----------
   Chaque lien, bouton ou libellé cliquable hors prose a une vraie boîte d'au moins 44 px (le contrôle mesure la boîte, pas un
   pseudo-élément). Seuls les liens en ligne dans une phrase de prose sont exemptés (WCAG 2.5.8 « inline »). Écrans étroits et
   tactiles seulement : la mise en page large ne change pas. */
@media (max-width: 960px), (pointer: coarse) {
  .brand, .footer-top a, .footer-bottom a, .footer-back, .affiliation-note a, .pied a,
  .fil-ariane a, .sommaire a, .liens-facettes a, .liens-suite a, .liste-marques a, .a-lire-aussi a,
  .tableau-classement th a, .produit-nom a, .guide-card a:not(.guide-image), .article-card a:not(.article-art), .product-info h3 a, .guide-card h3 a, .carte-photo h3 a, .rubriques a,
  .lien-fleche, .text-link, .hero-secondary, .comparison-link, .product-test,
  .prenez-carte a, p[data-gabarit]:not(.source):not(.source-date) > a, .chooser label, .faq a, .chooser-result a, .chooser-liens a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; box-sizing: border-box;
  }
  .footer-top > div:not(:first-child) > a, .footer-top .footer-back, .produit-nom a, .chooser label { display: flex; }
  .footer-top > div:not(:first-child) > a { margin-top: 0; min-height: 44px; }
  .liens-suite li, .liens-facettes li, .liste-marques li, .sommaire li { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
  .a-lire-aussi li { margin: 0; }
  .fil-ariane { padding-top: 0; }
  .fil-ariane ol { gap: 0 var(--s-8); }
  .fil-ariane li[data-sans-lien], .fil-ariane li[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Mouvement réduit : coupe toute animation, transition et défilement lissé du site, pseudo-éléments compris, feuille cardiochezsoi.css comprise. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.liens-duel { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); margin: var(--s-12) 0 0; }

/* Pied de page compact (mission 20261108-site1-v2-finitions-production) : trois colonnes au plus sur desktop (appareils et outils, pages du
   site et pages légales, mention d'affiliation), puis une ligne de logo et de copyright ; deux colonnes sur mobile, mention visible en clair. */
footer.pied { padding: var(--s-32) 0 var(--s-16); }
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: var(--s-40); align-items: start; }
.pied-rubriques { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-24); }
.pied h3 { margin: 0 0 var(--s-8); font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-footer-brand-span-93aa98); }
.pied-rubriques a, .pied-site a, .pied-rubriques .footer-bientot { display: flex; align-items: center; gap: var(--s-8); min-height: var(--s-26); font-size: var(--fs-13); color: var(--c-footer-secondary); }
.pied-site > div { display: flex; flex-direction: column; }
.pied a:hover { color: var(--c-white); }
.pied-affiliation p { margin: 0; font-size: var(--fs-12); line-height: var(--lh-1_5); color: var(--c-footer-disclosure); max-width: none; }
.pied-bas { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); margin-top: var(--s-20); padding-top: var(--s-12); border-top: 1px solid var(--c-affiliation-note-385348); font-size: var(--fs-12); color: var(--c-footer-secondary); }
.pied-bas .brand { font-size: var(--fs-18); }
.pied-bas .brand-symbol { width: 28px; height: 28px; }
@media (max-width: 960px) { .pied-grille { grid-template-columns: 1fr 1fr; gap: var(--s-20) var(--s-24); } .pied-rubriques { grid-column: 1 / 3; } .pied-affiliation { grid-column: 1 / 3; } }
/* Mobile : cibles de 44 px (contrôle des zones tactiles) ; les pastilles « Bientôt » ne sont pas des liens et restent plus basses */
@media (max-width: 640px) {
  footer.pied { padding: var(--s-16) 0 var(--s-8); }
  .pied-grille { grid-template-columns: 1fr; gap: var(--s-8); }
  .pied-rubriques { grid-column: auto; gap: var(--s-8) var(--s-16); }
  .pied-affiliation { grid-column: auto; }
  .pied-rubriques a, .pied-site a { min-height: 44px; }
  .pied-rubriques .footer-bientot { min-height: var(--s-24); }
  .pied-site > div { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-16); }
  .pied-site h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .pied-bas { margin-top: var(--s-4); padding-top: var(--s-4); }
}

/* Colonne de droite, images d'ambiance, cartes « Prenez A si » avec image, page /outils/ (mission 20261016-refonte-relecture).
   Variables du design seulement (jetons.css). Ne touche ni site.css ni cardiochezsoi.css. Contrôle de la colonne :
   03-outils/zones-vides.mjs (aucune plage vide de plus de 300 px à droite du texte à 1 280 px). */

/* ---------- Colonne de droite : masquée sous 1 100 px, collante au-dessus ---------- */
.colonne-droite { display: none; }
@media (min-width: 1100px) {
  .page.avec-droite { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: var(--s-48); align-items: start; }
  .page.avec-droite .fil-ariane { grid-column: 1 / -1; }
  .page.avec-droite main { max-width: none; margin: 0; min-width: 0; }
  .page.avec-droite main > :not(.titre-page) { max-width: 46rem; }
  .colonne-droite {
    display: block; position: sticky; top: var(--s-104); margin-top: var(--s-24);
    max-height: calc(100vh - var(--s-104) - var(--s-24)); overflow-y: auto; overscroll-behavior: contain;
  }
  .colonne-droite-contenu { display: flex; flex-direction: column; gap: var(--s-16); }
}
.colonne-bloc { padding: var(--s-16) var(--s-20); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--c-white); }
.colonne-titre { margin: 0 0 var(--s-8); font-size: var(--fs-13); line-height: var(--lh-1_4); font-weight: var(--fw-headings); color: var(--green); }
.colonne-bloc ol, .colonne-bloc ul { list-style: none; margin: 0; padding: 0; }
.colonne-bloc li { margin: 0; }
.colonne-sommaire a, .colonne-outils a, .colonne-liens a {
  display: block; padding: var(--s-4) 0; font-size: var(--fs-14); line-height: var(--lh-1_4); color: var(--ink); text-decoration: none;
}
.colonne-sommaire a:hover, .colonne-outils a:hover, .colonne-liens a:hover { color: var(--green); text-decoration: underline; }
.colonne-sommaire a:focus-visible, .colonne-outils a:focus-visible, .colonne-liens a:focus-visible, .colonne-nom a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (pointer: coarse) {
  .colonne-sommaire a, .colonne-outils a, .colonne-liens a, .colonne-nom a { min-height: 44px; display: flex; align-items: center; }
}
.colonne-resume { display: block; font-size: var(--fs-13); line-height: var(--lh-1_4); color: var(--muted); }
.colonne-choix { background: var(--c-sage); }
/* Vignette du produit retenu : 88 px de large à côté du nom (la carte reste basse, le bouton reste dans l'écran collant) */
.colonne-choix-tete { display: flex; align-items: flex-start; gap: var(--s-12); margin: 0 0 var(--s-8); }
.colonne-choix-tete .colonne-nom { margin: 0; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.colonne-choix .colonne-vignette { flex: 0 0 5.5rem; width: 5.5rem; max-width: 5.5rem; margin: 0; }
.colonne-choix .colonne-vignette img { aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.colonne-choix .colonne-vignette .image-credit { font-size: var(--fs-13); line-height: var(--lh-1_4); }
.colonne-nom { margin: 0 0 var(--s-8); font-weight: var(--fw-emphasis); font-size: var(--fs-15); line-height: var(--lh-1_4); color: var(--ink); }
.colonne-nom a { color: inherit; text-decoration: none; }
.colonne-nom a:hover { text-decoration: underline; }
.colonne-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); margin: 0 0 var(--s-8); }
.colonne-catalogue .colonne-chiffres { grid-template-columns: 1fr; gap: var(--s-12); }
.colonne-chiffres li { display: flex; flex-direction: column; min-width: 0; }
.colonne-chiffres .chiffre-valeur { font-size: var(--fs-25); line-height: var(--lh-1_2); font-weight: var(--fw-headings); color: var(--ink); }
.colonne-chiffres .chiffre-unite { font-size: var(--fs-13); font-weight: var(--fw-body); }
.colonne-chiffres .chiffre-libelle { font-size: var(--fs-13); line-height: var(--lh-1_4); color: var(--muted); }
.colonne-bouton .button-purchase { width: 100%; margin-top: var(--s-8); }

/* ---------- Image d'ambiance : une par page longue, hors fiche ---------- */
.image-ambiance { margin: var(--s-24) 0; }
.image-ambiance img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); background: var(--c-sage); }

/* ---------- « Prenez A si » : image du produit dans la carte (absente = carte sans image, sans trou) ---------- */
.prenez-carte .image-produit { max-width: none; margin: 0 0 var(--s-12); }
.prenez-carte .image-produit img { aspect-ratio: 16 / 10; border: 1px solid var(--line); }

/* ---------- Page /outils/ ---------- */
.outils-liste { list-style: none; margin: var(--s-24) 0; padding: 0; display: grid; gap: var(--s-16); }
.outils-liste > li { padding: var(--s-20); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--c-white); }
.outils-liste h2 { margin: 0 0 var(--s-8); font-size: var(--fs-22); line-height: var(--lh-1_25); }
.outils-liste p { margin: 0 0 var(--s-12); color: var(--muted); }

/* ---------- Défauts de rendu préexistants à 375 px (rapport 20261016-outils-geo) ---------- */
@media (max-width: 640px) {
  /* cadre du tableau « marche ou course » : 351 px dans 333, le tableau du duel resserre ses cellules et ne défile plus */
  .tableau-duel { font-size: var(--fs-13); }
  .tableau-duel th, .tableau-duel td { padding: var(--s-10) var(--s-6); overflow-wrap: anywhere; }
  /* premier écran d'une fiche à nom long : la photo d'ouverture passe en 16 / 9 pour que le nom du choix finisse au-dessus de la barre d'achat */
  .titre-page .ouverture-photo img { aspect-ratio: 16 / 9; }
}

/* ---------- Index local /relecture/ : liens à 44 px au moins (écrans étroits et tactiles) ---------- */
@media (max-width: 960px), (pointer: coarse) {
  body[data-type-page="relecture"] main a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; box-sizing: border-box; }
  body[data-type-page="relecture"] main td, body[data-type-page="relecture"] main th { padding-block: 0; }
}

/* Index des outils : image d'illustration de chaque outil (rendue seulement si présente). */
.outils-liste .outil-illustration { display: block; margin: 0 0 var(--s-12); border-radius: var(--r-12); overflow: hidden; }
.outils-liste .outil-illustration img { display: block; width: 100%; height: auto; max-width: 480px; }


/* Page Méthode : tableau du questionnaire (une table par appareil, calculée au build depuis data/attributs.md) */
@media (min-width: 768px) { .questionnaire-appareil table { min-width: 44rem; } }
.questionnaire-appareil td ul { list-style: none; margin: 0; padding: 0; }
.questionnaire-appareil td li { margin: 0 0 var(--s-8); font-size: var(--fs-14); line-height: var(--lh-1_4); }
.questionnaire-appareil td li:last-child { margin-bottom: 0; }
.questionnaire-appareil code { font-size: var(--fs-13); overflow-wrap: anywhere; }

/* Tableaux de la page Méthode (questionnaire) : en dessous de 768 px, une ligne devient un bloc, chaque cellule porte son libellé
   de colonne (data-label), pour qu'aucun cadre ne défile (décision du 2026-10-11 : aucun défilement dans le cadre d'un tableau). */
@media (max-width: 767px) {
  .tableau-empile table, .tableau-empile tbody, .tableau-empile tr, .tableau-empile th, .tableau-empile td { display: block; width: 100%; }
  .tableau-empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tableau-empile tr { padding: var(--s-12) var(--s-16); border-top: 1px solid var(--line); }
  .tableau-empile td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-13); font-weight: var(--fw-emphasis); color: var(--green); }
  .tableau-empile th, .tableau-empile td { padding: var(--s-6) 0; border: 0; overflow-wrap: anywhere; }
  .tableau-empile caption { display: block; padding: var(--s-12) var(--s-16); text-align: left; }
}

/* Tableau de classement à 375 px : marges latérales resserrées pour que le cadre ne défile pas (noms de modèle longs, ex. rameur/connecte) */
@media (max-width: 767px) {
  .tableau-classement th, .tableau-classement td { padding-left: var(--s-12); padding-right: var(--s-12); }
}
/* Index local /relecture/ : tableaux à colonnes fixes, texte qui passe à la ligne, aucun débordement horizontal */
body[data-type-page="relecture"] table { table-layout: fixed; }
body[data-type-page="relecture"] th, body[data-type-page="relecture"] td { overflow-wrap: anywhere; }

/* Premier écran à 375 px : le bloc de réponse directe remonte de 16 px pour que le nom du choix finisse dans l'écran sur les pages à titre long */
@media (max-width: 767px) {
  .bloc.bloc-reponse-directe, .bloc.bloc-reponse { margin-top: var(--s-32); }
}

/* ---------- Qui suis-je : bande d'en-tête, petite photo carrée encadrée à gauche du titre et de l'introduction (mission 20261019-pages-legales) ---------- */
.qui-suis-je-tete { display: grid; grid-template-columns: 11.25rem minmax(0, 1fr); column-gap: var(--s-24); align-items: start; margin: 0 0 var(--s-24); }
.portrait-editeur { margin: 0; }
.portrait-editeur img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-4); background: var(--c-sage); box-sizing: border-box; }
.qui-suis-je-texte > :first-child { margin-top: 0; }
/* Mission 20261107-retouches-mobile-site1 : portrait rond (image entière, aucun recadrage : le visage reste non identifiable, D-050),
   H1 à la taille des pages de contenu, respiration entre H1, premier paragraphe et H2. */
.portrait-editeur img { border-radius: 50%; padding: 0; aspect-ratio: 1 / 1; }
.qui-suis-je-tete { align-items: center; margin-bottom: var(--s-40); }
.qui-suis-je-texte h1 { font-size: var(--fs-section-title); letter-spacing: var(--ls-n1_55); margin: var(--s-8) 0 var(--s-24); }
.qui-suis-je-texte > p:not(.section-kicker) { line-height: var(--lh-1_7); }
.bloc-bio h2 { margin: var(--s-48) 0 var(--s-16); }
.bloc-bio h2:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .qui-suis-je-tete { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-16); justify-items: center; text-align: left; }
  .portrait-editeur { width: 7.5rem; }
  .qui-suis-je-texte { justify-self: stretch; }
}

/* Accueil refondu (mission 20261016-refonte-relecture, point B) : onglets de la sélection, questionnaire d'aide au choix, cartes d'outils
   avec image. Chargé par src/pages/index.astro seulement. Variables du site uniquement (jetons), aucune valeur en dur ; points de rupture
   de design/tokens.json. Sans JavaScript, rien n'est caché : panneaux empilés, formulaire masqué (attribut hidden) et liens visibles. */

/* ---------- Sélection : onglets par appareil ---------- */
.onglets { display: grid; gap: var(--s-32); }
.onglets-ancres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-8); }
.onglets-ancres a, .onglet {
  display: inline-flex; align-items: center; min-height: var(--layout-touch-control-min-height); padding: var(--s-8) var(--s-16);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--c-white); color: var(--ink);
  font: inherit; font-size: var(--fs-14); font-weight: var(--fw-emphasis); cursor: pointer; text-decoration: none;
}
.onglets-liste { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.onglet[aria-selected="true"] { background: var(--green); border-color: var(--green); color: var(--c-white); }
.onglet:focus-visible, .onglets-ancres a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.onglet-panneau { display: grid; gap: var(--s-20); }
.onglet-panneau[hidden] { display: none; }
.onglet-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-12); }
.onglet-entete h3 { margin: 0; }
html.js .onglets-ancres { display: none; }

/* ---------- Outils : image et appareils couverts ---------- */
.outil-appareils { font-size: var(--fs-14); color: var(--muted); }
.image-label-seul { position: static; display: inline-block; margin-bottom: var(--s-8); }
.guide-card .guide-image img[data-image-outil] { object-fit: cover; }

/* ---------- Image d'ouverture ---------- */
.hero-visual > img { object-fit: cover; }

/* Mission 20261107-retouches-site1-v2. Hero : deux rangées de texte à gauche (sur-titre et H1, puis chapô, boutons, chiffres), l'image sur les
   deux ; en une colonne, l'image passe entre le H1 et le chapô. Aucun texte sur l'image. H1 en échelle clamp(), 3 lignes au plus à 390 px. */
.hero { padding-top: var(--s-40); padding-bottom: var(--s-32); }
.hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "haut visuel" "bas visuel"; grid-template-rows: auto auto; align-content: center; gap: 0 var(--s-52); }
.hero .hero-copy-haut { grid-area: haut; align-self: end; padding: 0; }
.hero .hero-copy-bas { grid-area: bas; align-self: start; padding: 0; }
.hero .hero-visual { grid-area: visuel; min-height: 0; aspect-ratio: 4 / 3; align-self: center; }
.hero .hero-visual > img { object-position: 52% 18%; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--fw-700); color: var(--green); margin-bottom: var(--s-16); }
.hero .hero-copy h1 { font-size: clamp(var(--fs-31), 9.4vw, var(--fs-49)); line-height: var(--lh-1_13); letter-spacing: var(--ls-n1_5); margin: 0; max-width: 14em; }
.hero .hero-description { margin-top: var(--s-20); max-width: 32rem; font-size: var(--fs-16); line-height: var(--lh-1_5); }
.hero .hero-description p { margin: 0; }
.hero .hero-actions { margin-top: var(--s-24); }
.hero-chiffres { display: flex; flex-wrap: wrap; gap: var(--s-12) var(--s-32); margin: var(--s-28) 0 0; padding: var(--s-20) 0 0; border-top: 1px solid var(--line); }
.hero-chiffres div { display: grid; gap: var(--s-4); }
.hero-chiffres dt { font-size: var(--fs-31); font-weight: var(--fw-800); line-height: var(--lh-1); color: var(--green); letter-spacing: var(--ls-n1); }
.hero-chiffres dd { margin: 0; font-size: var(--fs-13); color: var(--muted); }
@media (min-width: 961px) { .hero .hero-copy h1 { font-size: clamp(var(--fs-39), 3.6vw, var(--fs-49)); } }
@media (max-width: 960px) {
  .hero .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "haut" "visuel" "bas"; row-gap: var(--s-24); }
  .hero .hero-visual { aspect-ratio: 1 / 1; }
  .hero .hero-visual > img { position: static; height: 100%; object-position: 46% 0; }
}
@media (min-width: 641px) and (max-width: 960px) { .hero .hero-visual { aspect-ratio: 3 / 2; } .hero .hero-visual > img { object-position: 50% 22%; } }

/* Navigation par appareils sous le hero : vignettes rondes, une par silo ; silo non publié = sans lien, avec « Bientôt » */
.rubriques { padding-block: var(--s-8) var(--s-24); }
.rubriques ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-16); }
.rubriques li { min-width: 0; }
.rubriques a, .rubrique-inactive { display: grid; justify-items: center; gap: var(--s-10); text-align: center; text-decoration: none; color: var(--ink); font-size: var(--fs-14); font-weight: var(--fw-emphasis); }
.rubrique-photo { display: block; width: 100%; max-width: 112px; aspect-ratio: 1 / 1; border-radius: var(--r-circle); overflow: hidden; background: var(--c-sage); }
.rubrique-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rubrique-photo img.equipment-art { object-fit: contain; padding: var(--s-12); box-sizing: border-box; }
.rubrique-compte { font-size: var(--fs-12); font-weight: var(--fw-body); color: var(--muted); }
.rubrique-inactive { opacity: 0.7; }
.rubriques a:hover .rubrique-nom { text-decoration: underline; }
.rubriques a:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: var(--r-12); }
@media (max-width: 640px) { .rubriques ul { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-20); } }

/* Cartes à image pleine : photo, type de page en petites capitales de couleur, titre court, une ligne, un lien */
.carte-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-29); }
.carte-photo { display: grid; align-content: start; gap: 0; min-width: 0; }
.carte-photo-image { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-12); background: var(--c-guide-image-e6e9dd); }
.carte-photo-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.carte-photo-image img.equipment-art { object-fit: contain; padding: var(--s-20); box-sizing: border-box; }
.carte-photo:hover .carte-photo-image img { transform: scale(1.025); }
.carte-photo-type { margin: var(--s-16) 0 var(--s-6); font-size: var(--fs-12); font-weight: var(--fw-700); letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.carte-photo h3 { margin: 0; font-size: var(--fs-21); line-height: var(--lh-1_25); max-width: none; }
.carte-photo h3 a { text-decoration: none; color: var(--ink); }
.carte-photo h3 a:hover { text-decoration: underline; }
.carte-photo p:not(.carte-photo-type) { margin: var(--s-8) 0 0; font-size: var(--fs-14); line-height: var(--lh-1_5); color: var(--muted); }
.carte-photo .text-link { margin-top: var(--s-12); justify-self: start; }
@media (max-width: 960px) { .carte-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); } }
@media (max-width: 640px) { .carte-grille { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); } }

/* Garanties : une ligne de titre, une ligne de texte */
.benefits .benefit p { margin-top: var(--s-4); }

/* « Comment on lit une fiche » : image à gauche, quatre étapes numérotées à droite */
.etapes-lecture { list-style: none; margin: var(--s-20) 0; padding: 0; display: grid; gap: var(--s-16); }
.etapes-lecture li { display: grid; grid-template-columns: var(--s-32) minmax(0, 1fr); gap: var(--s-14); align-items: start; }
.etapes-lecture li > span { display: inline-grid; place-items: center; width: var(--s-32); height: var(--s-32); border-radius: var(--r-circle); background: var(--c-sage); color: var(--ink); font-weight: var(--fw-800); font-size: var(--fs-14); }
.etapes-lecture h3 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-1_3); }
.etapes-lecture p { margin: var(--s-4) 0 0; font-size: var(--fs-14); line-height: var(--lh-1_5); color: var(--muted); }

/* ---------- Questionnaire d'aide au choix ---------- */
.aide-form { display: grid; gap: var(--s-20); }
.aide-form[hidden], .aide-questions[hidden], .aide-resultat[hidden] { display: none; }
.aide-q { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-8); }
.aide-q legend { padding: 0; font-size: var(--fs-15); font-weight: var(--fw-emphasis); color: var(--ink); display: flex; gap: var(--s-8); align-items: baseline; }
.aide-num {
  flex: none; display: inline-grid; place-items: center; width: var(--s-24); height: var(--s-24); border-radius: var(--r-circle);
  background: var(--c-sage); color: var(--ink); font-size: var(--fs-13); font-weight: var(--fw-emphasis);
}
.aide-q-aide { margin: 0; font-size: var(--fs-13); color: var(--muted); }
.aide-questions { display: grid; gap: var(--s-20); }
.aide-choix { display: grid; gap: var(--s-8); }
.chooser .aide-choix-item {
  display: flex; align-items: center; gap: var(--s-10); margin: 0; min-height: var(--layout-touch-control-min-height); padding: var(--s-8) var(--s-12);
  border: 1px solid var(--line); border-radius: var(--r-12); background: var(--c-white); font-size: var(--fs-14); font-weight: var(--fw-body); cursor: pointer;
}
.aide-choix-item:has(input:checked) { border-color: var(--green); background: var(--c-sage); }
.aide-choix-item:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
/* La case couvre toute la carte (zone tactile = la carte, >= 44 px) ; le rond est dessiné sur le libellé. */
.chooser .aide-choix-item { position: relative; }
.aide-choix-item input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: var(--r-12); cursor: pointer; }
.aide-choix-item span::before { content: ""; display: inline-block; vertical-align: -3px; width: var(--s-18); height: var(--s-18); margin-right: var(--s-10); border: 2px solid var(--green); border-radius: 50%; background: var(--c-white); box-sizing: border-box; }
.aide-choix-item:has(input:checked) span::before { background: radial-gradient(var(--green) 0 45%, var(--c-white) 50%); }
.aide-actions { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.chooser .aide-actions .button { width: auto; margin-top: 0; }
.aide-resultat { margin-top: var(--s-24); }
.aide-modeles { list-style: none; margin: var(--s-12) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.aide-modeles a { display: inline-flex; align-items: center; min-height: var(--layout-touch-control-min-height); color: var(--green); text-decoration: underline; }
.aide-proche { margin-top: var(--s-12); }
.aide-sans-js { font-size: var(--fs-13); color: var(--muted); margin: var(--s-20) 0 0; }
html.js .aide-sans-js { display: none; }
.chooser h3 { max-width: none; }

/* Trois cartes par onglet : grand écran seulement, mobile inchangé */
.onglets, .onglet-panneau { min-width: 0; }
@media (min-width: 961px) { .onglet-panneau .product-grid { grid-template-columns: repeat(3, 1fr); } }
.chooser .aide-actions .button-secondary { background: var(--c-white); color: var(--green); border: 1px solid var(--green); }