/* Les Robots Tondeuses · feuille de style principale (v2)
   Direction : catalogue de pépiniériste moderne. Papier crème, encre vert forêt, photos de jardins en grand,
   robots présentés en packshot sur des tuiles pastel dont la couleur dit la technologie de guidage
   (sauge = LiDAR, ciel = RTK, sable = caméra, terracotta = fil).
   Mobile d'abord ; couleurs en OKLCH ; espacements sur une grille de 4 px. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Neutres chauds (papier) et encre vert forêt */
  --papier: oklch(97.4% 0.014 92);
  --papier-2: oklch(94.6% 0.02 95);
  --papier-3: oklch(91.5% 0.026 98);
  --carte: oklch(99.3% 0.006 92);
  --trait: oklch(87.5% 0.02 105);
  --trait-fort: oklch(76% 0.026 120);
  --encre: oklch(24.5% 0.042 158);
  --encre-2: oklch(37% 0.036 156);
  --encre-3: oklch(48.5% 0.03 150);
  --foret: oklch(29% 0.058 157);
  --foret-2: oklch(35.5% 0.068 154);
  --foret-3: oklch(43% 0.075 150);
  --sur-foret: oklch(94% 0.028 120);
  --sur-foret-2: oklch(82% 0.035 130);
  /* Verts de pelouse */
  --herbe: oklch(66% 0.155 136);
  --herbe-vif: oklch(80% 0.17 132);
  --herbe-pale: oklch(92.5% 0.05 132);
  --vert: oklch(44% 0.105 150);
  --vert-fonce: oklch(34% 0.08 152);
  /* Action (Amazon) et alerte */
  --orange: oklch(54% 0.185 39);
  --orange-fonce: oklch(47% 0.165 37);
  --brique: oklch(46% 0.13 30);
  --brique-pale: oklch(94% 0.03 45);
  --focus: oklch(62% 0.17 140);
  /* Tuiles des packshots (même teinte que les fonds générés) */
  --tuile-lidar: oklch(90.6% 0.028 130);
  --tuile-rtk: oklch(91.2% 0.02 232);
  --tuile-vision: oklch(92.6% 0.03 80);
  --tuile-fil: oklch(91.6% 0.03 42);
  --tuile: var(--tuile-lidar);

  --police-titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --police-texte: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-legal: 0.8125rem;
  --t-petit: 0.875rem;
  --t-ui: 0.9375rem;
  --t-corps: 1.0625rem;
  --t-grand: 1.25rem;
  --t-h4: 1.1875rem;
  --t-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --t-h1: clamp(2.25rem, 1.35rem + 3.9vw, 4.5rem);
  --t-une: clamp(2.5rem, 1.3rem + 5vw, 5.25rem);

  --esp-2xs: 4px;
  --esp-xs: 8px;
  --esp-sm: 12px;
  --esp-md: 16px;
  --esp-lg: 24px;
  --esp-xl: 32px;
  --esp-2xl: 48px;
  --esp-3xl: 72px;
  --esp-4xl: 112px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --texte: 42rem;
  --large: 76rem;

  --rayon-petit: 8px;
  --rayon: 14px;
  --rayon-grand: 24px;
  --rayon-xl: 36px;
  --bandes: repeating-linear-gradient(90deg, var(--herbe-pale) 0 56px, oklch(89% 0.065 133) 56px 112px);
  --bandes-foret: repeating-linear-gradient(115deg, var(--foret) 0 70px, var(--foret-2) 70px 140px);
  --ombre: 0 1px 0 oklch(80% 0.02 110 / 0.5), 0 18px 40px -28px oklch(25% 0.05 155 / 0.45);
  --z-entete: 40;
  --z-barre: 30;
  --z-menu: 50;
  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--t-corps);
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--vert); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--encre); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

h1, h2, h3, h4 {
  font-family: var(--police-titre); font-optical-sizing: auto; color: var(--encre);
  line-height: 1.08; letter-spacing: -0.018em; margin: 0; text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 760; letter-spacing: -0.034em; line-height: 1.0; }
h2 { font-size: var(--t-h2); font-weight: 720; letter-spacing: -0.028em; }
h3 { font-size: var(--t-h3); font-weight: 680; }
h4 { font-size: var(--t-h4); font-weight: 680; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 650; }
.surtitre {
  font-family: var(--police-titre);
  font-size: var(--t-petit);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--vert);
  display: inline-flex; align-items: center; gap: 8px;
}
.surtitre::before { content: ""; width: 18px; height: 10px; flex: none; background: repeating-linear-gradient(90deg, var(--herbe) 0 3px, transparent 3px 6px); border-radius: 2px; }
.note { font-size: var(--t-petit); color: var(--encre-3); }

.lien-evitement { position: absolute; left: var(--esp-md); top: -60px; z-index: 100; background: var(--encre); color: var(--papier); padding: var(--esp-xs) var(--esp-md); border-radius: var(--rayon-petit); }
.lien-evitement:focus { top: var(--esp-xs); }

/* ================================================================ En-tête */
.entete {
  position: sticky; top: 0; z-index: var(--z-entete);
  background: oklch(97.4% 0.014 92 / 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete-interieur {
  max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto; padding: 10px var(--gouttiere);
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-md); min-height: 64px;
}
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.marque:hover { color: var(--encre); }
.marque-logo { width: 38px; height: 38px; flex: none; }
.marque-texte { display: grid; line-height: 1.02; }
.marque-nom { font-family: var(--police-titre); font-weight: 780; font-size: 1.25rem; letter-spacing: -0.03em; }
.marque-nom span { color: var(--vert); }
.marque-sous { font-size: var(--t-legal); color: var(--encre-3); display: none; letter-spacing: .01em; }
@media (min-width: 560px) { .marque-sous { display: block; } }
@media (max-width: 359px) { .marque-nom { font-size: 1.0625rem; } .marque-logo { width: 32px; height: 32px; } .menu-bouton { padding: 0 12px; } }

.entete-actions { display: flex; align-items: center; gap: var(--esp-xs); }
.entete-cta {
  display: none; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  background: var(--foret); color: var(--sur-foret); border-radius: 999px; text-decoration: none;
  font-family: var(--police-titre); font-weight: 650; font-size: var(--t-ui);
}
.entete-cta:hover { background: var(--foret-2); color: var(--carte); text-decoration: none; }
.entete-cta::after { content: "→"; }
@media (min-width: 1180px) { .entete-cta { display: inline-flex; } }

.menu-bouton {
  display: inline-flex; align-items: center; gap: var(--esp-xs);
  min-height: 44px; padding: 0 var(--esp-md);
  background: var(--carte); border: 1px solid var(--trait-fort); border-radius: 999px;
  font-family: var(--police-titre); font-weight: 650; font-size: var(--t-ui); cursor: pointer;
}
.menu-bouton-traits, .menu-bouton-traits::before, .menu-bouton-traits::after { display: block; width: 16px; height: 2px; background: var(--encre); border-radius: 2px; position: relative; }
.menu-bouton-traits::before, .menu-bouton-traits::after { content: ""; position: absolute; left: 0; }
.menu-bouton-traits::before { top: -5px; } .menu-bouton-traits::after { top: 5px; }
.menu-bouton[aria-expanded="true"] .menu-bouton-traits { background: transparent; }
.menu-bouton[aria-expanded="true"] .menu-bouton-traits::before { top: 0; transform: rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-bouton-traits::after { top: 0; transform: rotate(-45deg); }

.menu { display: none; }
.menu-liste, .menu-liste ul { list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; color: var(--encre); }
.menu a[aria-current="page"] { color: var(--vert); }

@media (max-width: 1023px) {
  html.menu-ouvert, body.menu-ouvert { overflow: hidden; }
  /* Le blocage du défilement casse le « sticky » : l'en-tête (et son bouton Fermer) est fixé en haut pendant l'ouverture. */
  html.menu-ouvert .entete { position: fixed; top: 0; left: 0; right: 0; }
  .menu.est-ouvert {
    display: block; position: fixed; top: 65px; right: 0; bottom: 0; left: 0; z-index: var(--z-menu);
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: var(--papier); overflow-y: auto; padding: var(--esp-sm) var(--gouttiere) calc(var(--esp-2xl) + env(safe-area-inset-bottom));
  }
  .menu-liste > .menu-item { border-bottom: 1px solid var(--trait); }
  .menu-liste > .menu-item > a, .menu-groupe summary { display: flex; align-items: center; min-height: 60px; font-family: var(--police-titre); font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.02em; }
  .menu-groupe summary { list-style: none; cursor: pointer; justify-content: space-between; }
  .menu-groupe summary::-webkit-details-marker { display: none; }
  .menu-groupe summary::after { content: "+"; font-size: 1.625rem; font-weight: 400; color: var(--vert); }
  .menu-groupe details[open] summary::after { content: "–"; }
  .menu-groupe ul { padding-bottom: var(--esp-sm); }
  .menu-groupe li a { display: flex; align-items: center; min-height: 46px; padding-left: var(--esp-md); font-size: var(--t-corps); }
}
@media (min-width: 1024px) {
  .menu-bouton { display: none; }
  .menu { display: block; }
  .menu-liste { display: flex; align-items: center; gap: 2px; }
  .menu-liste > .menu-item > a, .menu-groupe summary {
    display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px;
    font-family: var(--police-titre); font-weight: 620; font-size: var(--t-ui); border-radius: 999px; cursor: pointer; list-style: none;
  }
  .menu-groupe summary::-webkit-details-marker { display: none; }
  .menu-groupe summary::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
  .menu-liste > .menu-item > a:hover, .menu-groupe summary:hover, .menu-groupe details[open] summary { background: var(--papier-2); }
  .menu-groupe { position: relative; }
  .menu-groupe ul {
    position: absolute; left: 0; top: calc(100% + 8px); min-width: 260px; padding: 8px;
    background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
    box-shadow: 0 22px 44px -26px oklch(25% 0.05 155 / 0.5);
  }
  .menu-liste > .menu-groupe:last-child ul, .menu-liste > .menu-groupe:nth-last-child(2) ul { left: auto; right: 0; }
  .menu-groupe li a { display: block; padding: 10px 12px; border-radius: var(--rayon-petit); font-size: var(--t-ui); }
  .menu-groupe li a:hover { background: var(--papier-2); }
}

/* ================================================================ Accueil : la une */
.une { position: relative; overflow: clip; }
.une::before { /* bandes de tonte en fond, très douces */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 78%;
  background: repeating-linear-gradient(100deg, transparent 0 90px, oklch(94.4% 0.028 110 / .55) 90px 180px);
  pointer-events: none;
}
.une-interieur {
  position: relative; max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: var(--esp-lg) var(--gouttiere) var(--esp-xl);
  display: grid; gap: var(--esp-xl);
}
.une-texte { display: grid; gap: var(--esp-md); align-content: center; }
.une h1 { font-size: var(--t-une); line-height: .96; letter-spacing: -0.045em; font-weight: 790; max-width: 13ch; }
.une h1 span { display: block; color: var(--vert); font-weight: 700; letter-spacing: -0.035em; font-size: .72em; line-height: 1.02; margin-top: .18em; max-width: 17ch; }
.une-chapo { font-size: clamp(1.125rem, 1.02rem + .45vw, 1.3125rem); line-height: 1.5; color: var(--encre-2); max-width: 34rem; }
.une-question { font-family: var(--police-titre); font-weight: 720; font-size: 1.1875rem; letter-spacing: -0.015em; margin-top: var(--esp-xs); }
.une-choix { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.une-choix a {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px;
  min-height: 68px; padding: 8px 12px 8px 8px; border-radius: 18px;
  background: var(--carte); border: 1px solid var(--trait); text-decoration: none; color: var(--encre);
  transition: border-color .2s var(--sortie), transform .2s var(--sortie), box-shadow .2s var(--sortie);
}
.une-choix a:hover { border-color: var(--herbe); transform: translateY(-2px); box-shadow: var(--ombre); }
.une-choix img, .une-choix .rdt-img-repli { width: 52px; height: 52px; border-radius: 13px; object-fit: cover; background: var(--herbe-pale); }
.une-choix strong { display: block; font-family: var(--police-titre); font-weight: 700; font-size: 1rem; line-height: 1.15; letter-spacing: -0.01em; }
.une-choix small { display: block; font-size: var(--t-petit); color: var(--encre-3); line-height: 1.25; }
.une-signature { font-size: var(--t-petit); color: var(--encre-3); display: grid; gap: 2px; }
.une-signature a { color: inherit; }

.une-visuel { margin: 0; position: relative; }
.une-visuel img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 50%;
  border-radius: var(--rayon-xl); background: var(--herbe-pale);
}
.une-etiquette {
  position: absolute; left: 12px; bottom: 12px; right: auto; max-width: calc(100% - 24px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px;
  padding: 12px 16px 12px 18px; border-radius: 18px;
  background: var(--carte); color: var(--encre); text-decoration: none; box-shadow: 0 16px 34px -18px oklch(20% 0.05 155 / .55);
}
.une-etiquette small { grid-column: 1; font-size: var(--t-legal); color: var(--encre-3); letter-spacing: .01em; }
.une-etiquette strong { grid-column: 1; font-family: var(--police-titre); font-weight: 750; font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.15; }
.une-etiquette span { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--foret); color: var(--sur-foret); font-size: 1.125rem; }
.une-etiquette:hover { color: var(--encre); }
.une-etiquette:hover span { background: var(--orange); color: var(--carte); }
.une-tampon { /* tampon rond façon pépinière */
  position: absolute; right: 14px; top: 14px; width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 14px;
  background: var(--herbe-vif); color: var(--foret);
  font-family: var(--police-titre); font-weight: 780; font-size: .8125rem; line-height: 1.05; letter-spacing: -0.01em;
  transform: rotate(8deg); box-shadow: 0 10px 24px -14px oklch(25% 0.08 150 / .6);
}
.une-tampon::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed oklch(35% 0.07 150 / .55); }

.une-promesses {
  position: relative; list-style: none; margin: 0 auto; padding: 0 var(--gouttiere);
  max-width: calc(var(--large) + 2 * var(--gouttiere));
  display: grid; gap: 0;
}
.une-promesses li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--trait); font-size: var(--t-ui); color: var(--encre-2);
}
.une-promesses b { font-family: var(--police-titre); font-weight: 780; color: var(--vert); font-size: 1rem; letter-spacing: -0.01em; }
.une-promesses strong { color: var(--encre); font-weight: 650; }
@media (max-width: 979px) {
  /* Mobile et tablette : la photo juste sous le titre, puis le chapô et les choix. */
  .une-interieur { display: flex; flex-direction: column; gap: var(--esp-md); }
  .une-texte { display: contents; }
  .une-texte > .surtitre { order: 1; }
  .une-texte > h1 { order: 2; }
  .une-visuel { order: 3; margin: var(--esp-xs) 0; }
  .une-chapo { order: 4; }
  .une-question { order: 5; }
  .une-choix { order: 6; }
  .une-signature { order: 7; }
}
@media (min-width: 640px) {
  .une-choix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .une-promesses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-lg); }
  .une-promesses li { border-top: 2px solid var(--encre); padding-top: 14px; }
}
@media (min-width: 980px) {
  .une-interieur { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--esp-2xl); padding-top: var(--esp-2xl); padding-bottom: var(--esp-2xl); }
  .une-visuel img { aspect-ratio: 5 / 6; border-radius: 280px 280px var(--rayon-xl) var(--rayon-xl); } /* arche de jardin */
  .une-etiquette { left: -28px; bottom: 36px; }
  .une-tampon { right: -18px; top: 64px; width: 128px; height: 128px; font-size: .9375rem; }
  .une-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 1180 px et plus : on garde 2 colonnes, les tuiles à 3 colonnes coupaient les textes */

@media (prefers-reduced-motion: no-preference) {
  /* Le titre et la photo (éléments LCP) s'affichent tout de suite ; seuls les éléments secondaires entrent en scène. */
  .une-choix li { animation: monte .6s var(--sortie) both; }
  .une-choix li:nth-child(2) { animation-delay: .05s; } .une-choix li:nth-child(3) { animation-delay: .1s; }
  .une-choix li:nth-child(4) { animation-delay: .15s; } .une-choix li:nth-child(5) { animation-delay: .2s; } .une-choix li:nth-child(6) { animation-delay: .25s; }
  .une-etiquette { animation: monte .6s .3s var(--sortie) both; }
  .une-tampon { animation: tampon .6s .45s var(--sortie) both; }
  @keyframes monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes tampon { from { opacity: 0; transform: rotate(-20deg) scale(.6); } to { opacity: 1; transform: rotate(8deg) scale(1); } }
}

/* ================================================================ En-tête des pages */
.page-tete { position: relative; }
.page-tete-interieur {
  position: relative; max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: var(--esp-lg) var(--gouttiere) var(--esp-lg);
  display: grid; gap: var(--esp-sm); align-content: start;
}
.page-tete h1 { max-width: 22ch; }
.page-meta { font-size: var(--t-petit); color: var(--encre-3); }
.page-meta a { color: inherit; }
.chapo { font-size: clamp(1.125rem, 1.04rem + .35vw, 1.25rem); line-height: 1.5; color: var(--encre-2); max-width: 40rem; }
.mention-courte { font-size: var(--t-petit); color: var(--encre-3); max-width: 40rem; }
.mention-courte::before { content: "€"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: var(--papier-3); color: var(--encre-2); font-size: 11px; font-weight: 700; vertical-align: 1px; }

/* Page à photo : image plein cadre, feuille de titre qui la chevauche */
.page-visuel { position: relative; height: clamp(240px, 54vw, 640px); overflow: hidden; background: var(--herbe-pale); }
.page-visuel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 66%; }
.page-visuel::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to bottom, transparent, oklch(20% 0.03 150 / .22)); }
.a-visuel .page-tete-interieur { margin-top: -28px; }
.a-visuel .page-tete-interieur::before {
  content: ""; position: absolute; z-index: -1; inset: 0 max(0px, calc(var(--gouttiere) - 20px)) 0;
  background: var(--papier); border-radius: var(--rayon-xl) var(--rayon-xl) 0 0;
}
.a-visuel .page-tete-interieur { z-index: 1; padding-top: var(--esp-lg); }
.page-tete-interieur > * { position: relative; }
@media (min-width: 760px) {
  .a-visuel .page-tete-interieur { margin-top: -88px; padding-top: var(--esp-xl); padding-left: calc(var(--gouttiere) + 28px); padding-right: calc(var(--gouttiere) + 28px); }
}

/* Page de marque ou sommaire des avis : rangée de packshots */
.a-lineup .page-tete-interieur { gap: var(--esp-sm); }
.lineup { list-style: none; margin: var(--esp-sm) 0 0; padding: 0; display: flex; gap: 8px; max-width: 34rem; }
.lineup li { flex: 1 1 0; min-width: 0; margin: 0; border-radius: 16px; overflow: hidden; background: var(--tuile); aspect-ratio: 1; }
.lineup li:nth-child(n+5) { display: none; }
.lineup img, .lineup .rdt-img-repli { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 980px) {
  .a-lineup .page-tete-interieur { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: var(--esp-2xl); padding-top: var(--esp-2xl); }
  .a-lineup .page-tete-interieur > :not(.lineup) { grid-column: 1; }
  .a-lineup .lineup { grid-column: 2; grid-row: 1 / span 7; align-self: center; flex-wrap: wrap; gap: 12px; max-width: none; margin: 0; }
  .a-lineup .lineup li { border-radius: 20px; }
  .a-lineup .lineup li:first-child { flex-basis: 100%; aspect-ratio: 2 / 1.1; border-radius: var(--rayon-xl); }
  .a-lineup .lineup li:nth-child(n+5) { display: block; }
}

.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: var(--t-petit); color: var(--encre-3); }
.ariane li + li::before { content: "›"; margin: 0 8px; color: var(--trait-fort); }
.ariane a { color: var(--encre-2); text-decoration: none; }
.ariane a:hover { text-decoration: underline; }

/* ================================================================ Grille des contenus */
.page-contenu {
  display: grid;
  grid-template-columns:
    [plein-start] minmax(var(--gouttiere), 1fr)
    [large-start] minmax(0, calc((var(--large) - var(--texte)) / 2))
    [texte-start] min(var(--texte), 100% - 2 * var(--gouttiere)) [texte-end]
    minmax(0, calc((var(--large) - var(--texte)) / 2)) [large-end]
    minmax(var(--gouttiere), 1fr) [plein-end];
  row-gap: 0;
  padding-top: var(--esp-xs);
  padding-bottom: var(--esp-3xl);
}
.page-contenu > * { grid-column: texte; margin: 0 0 var(--esp-md); min-width: 0; }
.page-contenu > h2 { margin-top: var(--esp-3xl); margin-bottom: var(--esp-md); scroll-margin-top: 92px; }
.page-contenu > h2::before { content: ""; display: block; width: 44px; height: 6px; margin-bottom: 16px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--herbe) 0 11px, var(--herbe-pale) 11px 22px); }
.page-contenu > h2.no-sommaire::before { display: none; }
.page-contenu > h3 { margin-top: var(--esp-xl); margin-bottom: var(--esp-xs); }
.page-contenu > h4 { margin-top: var(--esp-lg); margin-bottom: var(--esp-2xs); }
.page-contenu > ul, .page-contenu > ol { padding-left: 1.25em; }
.page-contenu li { margin-bottom: 6px; }
.page-contenu li::marker { color: var(--herbe); }
.page-contenu > .large, .page-contenu > .cartes, .page-contenu > .tableau, .page-contenu > .verdict,
.page-contenu > .rdt-figure.large, .page-contenu > .reponse.large, .page-contenu > .grille-2, .page-contenu > .techno, .page-contenu > .accessoires-bloc {
  grid-column: large;
}
.page-contenu > .plein, .page-contenu > .selecteur { grid-column: plein; }

/* Réponse courte (« En bref », « Notre avis ») */
.reponse {
  margin-top: var(--esp-xs) !important;
  display: grid; gap: var(--esp-md);
  padding: var(--esp-lg);
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-grand);
  position: relative; overflow: hidden; box-shadow: var(--ombre);
}
.reponse::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--bandes); }
.reponse > p:first-child, .reponse .surtitre { margin-top: 6px; }
.reponse ol, .reponse ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.reponse li { position: relative; padding-left: 30px; margin: 0; }
.reponse li::before { content: ""; position: absolute; left: 0; top: .28em; width: 20px; height: 20px; border-radius: 50%; background: var(--herbe-pale); }
.reponse li::after { content: ""; position: absolute; left: 6px; top: calc(.28em + 6px); width: 8px; height: 4.5px; border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert); transform: rotate(-45deg); }
.reponse strong { color: var(--encre); }
.reponse.large { background: var(--foret); color: var(--sur-foret); border: 0; }
.reponse.large::before { background: repeating-linear-gradient(90deg, var(--herbe) 0 56px, var(--herbe-vif) 56px 112px); }
.reponse.large strong { color: var(--carte); }
.reponse.large .surtitre { color: var(--herbe-vif); }
.reponse.large .surtitre::before { background: repeating-linear-gradient(90deg, var(--herbe-vif) 0 3px, transparent 3px 6px); }
.reponse.large li::before { background: oklch(40% 0.08 150); }
.reponse.large li::after { border-color: var(--herbe-vif); }
.reponse.large a { color: var(--herbe-vif); }
@media (min-width: 900px) {
  .reponse.large { padding: var(--esp-xl) var(--esp-2xl); }
  .reponse.large ul { grid-template-columns: 1fr 1fr; column-gap: var(--esp-2xl); row-gap: 14px; }
}

/* ================================================================ Images dans le texte */
.rdt-figure { margin: var(--esp-xl) 0; }
.page-contenu > .rdt-figure { margin: var(--esp-xl) 0; }
.rdt-figure img, .rdt-figure .rdt-img-repli { width: 100%; border-radius: var(--rayon-grand); background: var(--herbe-pale); aspect-ratio: 3 / 2; object-fit: cover; }
.rdt-figure figcaption { font-size: var(--t-petit); color: var(--encre-3); margin-top: var(--esp-xs); }
.rdt-img-repli { width: 100%; height: auto; }

/* ================================================================ Cotes (mesures) */
.cotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.cotes li { margin: 0; padding: 8px 10px 9px; border-radius: 12px; background: var(--papier-2); display: grid; gap: 1px; align-content: start; }
.cotes span { font-size: var(--t-legal); color: var(--encre-3); font-weight: 600; letter-spacing: .01em; }
.cotes strong { font-family: var(--police-titre); font-size: 1.0625rem; font-weight: 720; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -0.01em; hyphens: auto; }
.carte .cotes, .encart .cotes { grid-template-columns: auto auto minmax(0, 1fr); }
.carte .cotes li:nth-child(3) strong, .encart .cotes li:nth-child(3) strong { font-size: 1rem; }

/* ================================================================ Bouton Amazon */
.cta-amazon {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 6px 16px 6px 20px;
  background: var(--orange); color: oklch(99% 0.005 60);
  border-radius: 999px; text-decoration: none;
  font-family: var(--police-titre); font-weight: 700; font-size: 1rem; line-height: 1.1; letter-spacing: -0.005em;
  box-shadow: 0 10px 20px -14px oklch(45% 0.17 38 / .9);
  transition: background-color .18s var(--sortie), transform .18s var(--sortie), box-shadow .18s var(--sortie);
}
.cta-amazon:hover { background: var(--orange-fonce); color: oklch(99% 0.005 60); transform: translateY(-1px); text-decoration: none; }
.cta-amazon:active { transform: translateY(1px); }
.cta-logo { width: 64px; height: auto; flex: none; }
.lien-remunere { display: block; font-size: var(--t-legal); color: var(--encre-3); margin-top: 6px; }
.lien-avis { font-family: var(--police-titre); font-weight: 680; font-size: var(--t-ui); color: var(--encre); text-decoration-color: var(--herbe); text-decoration-thickness: 2px; }
.lien-avis::after { content: " →"; }

/* ================================================================ Cartes produit */
[data-famille="lidar"] { --tuile: var(--tuile-lidar); }
[data-famille="rtk"] { --tuile: var(--tuile-rtk); }
[data-famille="vision"] { --tuile: var(--tuile-vision); }
[data-famille="fil"] { --tuile: var(--tuile-fil); }

.cartes { display: grid; gap: var(--esp-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: var(--esp-md) 0 var(--esp-2xl) !important; }
.carte {
  display: grid; grid-template-rows: auto 1fr; background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--rayon-grand); overflow: hidden;
  transition: box-shadow .25s var(--sortie), transform .25s var(--sortie);
}
.carte:hover { box-shadow: var(--ombre); }
.carte[hidden] { display: none; }
.carte-visuel { position: relative; background: var(--tuile); aspect-ratio: 5 / 4; margin: 8px 8px 0; border-radius: 18px; overflow: hidden; }
.carte-visuel > a { display: block; height: 100%; }
.carte-visuel img, .carte-visuel svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--sortie); }
.carte:hover .carte-visuel img { transform: scale(1.035); }
.carte-badge {
  position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px);
  padding: 6px 12px 6px 26px; border-radius: 999px;
  background: var(--carte); color: var(--encre); font-family: var(--police-titre); font-weight: 680; font-size: var(--t-petit); line-height: 1.2; letter-spacing: -0.005em;
  box-shadow: 0 6px 14px -10px oklch(25% 0.05 155 / .6);
}
.carte-badge::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--herbe); box-shadow: 0 0 0 3px var(--herbe-pale); }
.carte-corps { display: grid; align-content: start; gap: 12px; padding: 16px 18px 20px; }
.carte-marque { font-size: var(--t-petit); font-weight: 650; color: var(--encre-3); letter-spacing: .01em; }
.carte-nom { font-size: 1.4375rem; margin-top: -8px; font-weight: 740; letter-spacing: -0.025em; }
.carte-nom a { color: var(--encre); text-decoration: none; }
.carte-nom a:hover { text-decoration: underline; text-decoration-color: var(--herbe); text-decoration-thickness: 2px; }
.carte-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-sm) var(--esp-md); margin-top: 2px; }
@media (max-width: 639px) {
  /* Mobile : vignette carrée à gauche du nom, le reste de la carte en pleine largeur. */
  .cartes { gap: var(--esp-md); }
  .carte { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: none; column-gap: 14px; row-gap: 10px; padding: 12px 14px 16px; align-items: start; border-radius: 20px; }
  .carte-visuel, .carte-corps { display: contents; }
  .carte-visuel > a { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 1; height: auto; border-radius: 14px; overflow: hidden; background: var(--tuile); }
  .carte-badge { position: relative; left: auto; top: auto; grid-column: 2; grid-row: 1; justify-self: start; max-width: 100%; box-shadow: none; background: var(--papier-2); }
  .carte-marque { grid-column: 2; grid-row: 2; align-self: end; }
  .carte-nom { grid-column: 2; grid-row: 3; margin-top: -4px; font-size: 1.25rem; }
  .carte-corps > .cotes, .carte-corps > .pour-pas-pour, .carte-actions, .carte-corps > .lien-remunere { grid-column: 1 / -1; }
  .carte-corps > .lien-remunere { margin-top: -4px; }
  .pour-pas-pour div { grid-template-columns: 4.5rem 1fr; }
}

.pour-pas-pour { margin: 0; display: grid; gap: 8px; }
.pour-pas-pour div { display: grid; grid-template-columns: 5.25rem 1fr; gap: var(--esp-xs); align-items: baseline; }
.pour-pas-pour dt { font-family: var(--police-titre); font-size: var(--t-petit); font-weight: 750; }
.pour-pas-pour .pour dt { color: var(--vert); }
.pour-pas-pour .pas-pour dt { color: var(--brique); }
.pour-pas-pour dd { margin: 0; font-size: var(--t-ui); line-height: 1.45; color: var(--encre-2); }

/* ================================================================ Tableau comparatif */
.tableau { margin: var(--esp-md) 0 var(--esp-2xl) !important; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-sm); min-width: 0; }
.filtres { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px var(--gouttiere) 6px; margin: 0 calc(-1 * var(--gouttiere)); }
.filtres::-webkit-scrollbar { display: none; }
@media (min-width: 1180px) { .filtres { margin: 0; padding-left: 2px; padding-right: 2px; } }
.filtres button {
  flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  background: var(--carte); border: 1px solid var(--trait-fort); font-family: var(--police-titre); font-size: var(--t-ui); font-weight: 650; white-space: nowrap;
  transition: background-color .15s var(--sortie), color .15s var(--sortie);
}
.filtres button:hover { border-color: var(--encre); }
.filtres button[aria-pressed="true"] { background: var(--foret); border-color: var(--foret); color: var(--sur-foret); }
.tableau-defil { position: relative; min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--carte); }
.tableau table { width: 100%; min-width: 800px; border-collapse: separate; border-spacing: 0; font-size: var(--t-ui); }
.tableau th, .tableau td { padding: 10px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--trait); }
.tableau thead th { font-family: var(--police-titre); font-size: var(--t-petit); font-weight: 700; color: var(--encre-2); background: var(--papier-2); white-space: nowrap; }
.tableau thead th button { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.tableau thead th button::after { content: "↕"; color: var(--encre-3); font-size: .85em; }
.tableau thead th button[data-sens="asc"]::after { content: "↑"; color: var(--vert); }
.tableau thead th button[data-sens="desc"]::after { content: "↓"; color: var(--vert); }
.tableau tbody tr:hover > * { background: oklch(96.8% 0.02 110); }
.tableau tbody tr:last-child > * { border-bottom: 0; }
.tableau tbody th { position: sticky; left: 0; z-index: 1; background: var(--carte); min-width: 13rem; max-width: 16rem; box-shadow: 1px 0 0 var(--trait); }
.modele { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; }
.modele-img { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--tuile); }
.modele-img img, .modele-img svg { width: 100%; height: 100%; object-fit: cover; }
.modele-nom { font-family: var(--police-titre); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.modele-nom a { color: var(--encre); }
.modele-nom small { display: block; font-family: var(--police-texte); font-weight: 400; color: var(--encre-3); font-size: var(--t-petit); letter-spacing: 0; }
.tableau td { font-variant-numeric: tabular-nums; }
.tableau td .cta-amazon { min-height: 40px; padding: 4px 10px 4px 14px; font-size: var(--t-petit); gap: 8px; box-shadow: none; }
.tableau td .cta-logo { width: 50px; }
.pastille { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pastille::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tuile); box-shadow: inset 0 0 0 1.5px oklch(45% 0.05 140 / .35); flex: none; }
.tableau tr[hidden] { display: none; }
.tableau-vide { padding: var(--esp-md); background: var(--papier-2); border-radius: var(--rayon); }
@media (max-width: 639px) {
  .tableau tbody th { min-width: 11.5rem; }
  .modele { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .modele-img { width: 40px; height: 40px; border-radius: 10px; }
}

/* ================================================================ Sélecteur (bandeau vert profond) */
.selecteur {
  margin: var(--esp-2xl) 0 var(--esp-3xl) !important;
  background: var(--foret); color: var(--sur-foret);
  padding: var(--esp-2xl) max(var(--gouttiere), calc((100% - var(--large)) / 2)) var(--esp-2xl);
  position: relative; overflow: hidden; scroll-margin-top: 70px;
}
.selecteur::before { content: ""; position: absolute; inset: 0; background: var(--bandes-foret); opacity: .55; pointer-events: none; }
.selecteur > * { position: relative; }
.selecteur-tete { display: grid; gap: 10px; margin-bottom: var(--esp-lg); max-width: 44rem; }
.selecteur-tete h2 { color: var(--carte); font-size: var(--t-h2); }
.selecteur-tete .surtitre { color: var(--herbe-vif); }
.selecteur-tete .surtitre::before { background: repeating-linear-gradient(90deg, var(--herbe-vif) 0 3px, transparent 3px 6px); }
.selecteur-tete p:last-child { color: var(--sur-foret-2); max-width: 38rem; }
.selecteur-form { display: grid; gap: var(--esp-lg); padding: var(--esp-lg); background: oklch(33% 0.062 155 / .88); border: 1px solid oklch(45% 0.06 150 / .6); border-radius: var(--rayon-grand); }
.selecteur fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.selecteur legend { font-family: var(--police-titre); font-weight: 700; font-size: 1rem; margin-bottom: 10px; padding: 0; color: var(--carte); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces input { position: absolute; opacity: 0; pointer-events: none; }
.puces label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid oklch(55% 0.05 145 / .8); background: transparent; color: var(--sur-foret); font-size: var(--t-ui); font-weight: 600; user-select: none;
  transition: background-color .15s var(--sortie), color .15s var(--sortie), border-color .15s var(--sortie);
}
.puces label:hover { border-color: var(--herbe-vif); }
.puces input:checked + label { background: var(--herbe-vif); border-color: var(--herbe-vif); color: var(--foret); font-weight: 700; }
.puces input:focus-visible + label { outline: 3px solid var(--herbe-vif); outline-offset: 2px; }
.selecteur-resultats { margin-top: var(--esp-lg); padding: var(--esp-lg); background: var(--carte); color: var(--encre); border-radius: var(--rayon-grand); display: grid; gap: var(--esp-md); }
.resultats-titre { font-family: var(--police-titre); font-weight: 750; font-size: var(--t-grand); letter-spacing: -0.015em; }
.resultats-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-md); counter-reset: res; }
.resultat { counter-increment: res; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--esp-sm); padding-bottom: var(--esp-md); border-bottom: 1px solid var(--trait); }
.resultat:last-child { border-bottom: 0; padding-bottom: 0; }
.resultat::before { content: counter(res); font-family: var(--police-titre); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--herbe); }
.resultat-corps { display: grid; gap: var(--esp-xs); min-width: 0; }
.resultat-tete { display: flex; gap: var(--esp-sm); align-items: center; }
.resultat-tete img { width: 76px; height: 76px; object-fit: cover; border-radius: 16px; background: var(--tuile-lidar); flex: none; }
.resultat-nom { font-family: var(--police-titre); font-weight: 750; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.02em; }
.resultat-nom small { display: block; font-family: var(--police-texte); font-weight: 400; font-size: var(--t-petit); color: var(--encre-3); letter-spacing: 0; }
.resultat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-ui); color: var(--encre-2); }
.resultat li { padding-left: 1.4em; position: relative; margin: 0; }
.resultat li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert); transform: rotate(-45deg); }
.resultat li.reserve::before { border: 0; width: 8px; height: 2px; background: var(--brique); transform: none; top: .7em; }
.resultat .carte-actions { margin-top: 2px; }
.resultats-vide { padding: var(--esp-md); background: var(--brique-pale); border-radius: var(--rayon); }
@media (min-width: 760px) {
  .selecteur-form { grid-template-columns: 1fr 1fr; column-gap: var(--esp-2xl); padding: var(--esp-xl); }
  .selecteur-form fieldset:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .resultat { animation: apparait .36s var(--sortie) both; }
  .resultat:nth-child(2) { animation-delay: .06s; } .resultat:nth-child(3) { animation-delay: .12s; }
  @keyframes apparait { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ================================================================ Outils (surface, pente) */
.outil { margin: var(--esp-xl) 0 !important; padding: var(--esp-lg); background: var(--papier-2); border: 1px solid var(--trait); border-radius: var(--rayon-grand); display: grid; gap: var(--esp-sm); }
.outil-titre { font-size: var(--t-h3); margin: 0 !important; }
.outil-titre::before { display: none !important; }
.outil-champs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-sm); }
.outil label { display: grid; gap: 4px; font-size: var(--t-petit); font-weight: 650; color: var(--encre-2); }
.outil input { width: 8.5rem; min-height: 46px; padding: 8px 12px; font-size: 16px; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--carte); }
.outil input:focus { border-color: var(--vert); }
.outil-fois { padding-bottom: 12px; color: var(--encre-3); }
.outil-resultat { font-family: var(--police-titre); font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }
.outil-resultat strong { color: var(--vert); }

/* ================================================================ Verdict (pages avis) */
.verdict {
  margin: var(--esp-xs) 0 var(--esp-2xl) !important; display: grid; gap: var(--esp-lg);
  padding: 10px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-xl); box-shadow: var(--ombre);
}
.verdict-visuel { border-radius: 26px; overflow: hidden; background: var(--tuile); aspect-ratio: 1; }
.verdict-visuel img, .verdict-visuel svg { width: 100%; height: 100%; object-fit: cover; }
.verdict-texte { display: grid; gap: var(--esp-md); align-content: start; padding: 4px 10px 12px; }
.verdict-phrase { font-family: var(--police-titre); font-size: clamp(1.3125rem, 1.12rem + .8vw, 1.75rem); font-weight: 680; line-height: 1.22; letter-spacing: -0.02em; }
.verdict-actions .cta-amazon { width: 100%; }
@media (min-width: 560px) { .verdict-actions .cta-amazon { width: auto; min-width: 17rem; } }
.verdict-listes { display: grid; gap: var(--esp-lg); padding: var(--esp-lg); background: var(--papier-2); border-radius: 26px; }
.h-liste { font-size: var(--t-grand); margin-bottom: var(--esp-xs) !important; }
.verdict-listes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.verdict-listes li { position: relative; padding-left: 30px; margin: 0; line-height: 1.5; }
.forts li::before, .limites li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; }
.forts li::before { background: var(--herbe-pale); }
.forts li::after { content: ""; position: absolute; left: 6px; top: calc(.2em + 6px); width: 8px; height: 4.5px; border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert); transform: rotate(-45deg); }
.limites li::before { background: var(--brique-pale); }
.limites li::after { content: ""; position: absolute; left: 6px; top: calc(.2em + 9px); width: 8px; height: 2px; background: var(--brique); }
@media (min-width: 860px) {
  .verdict { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: var(--esp-xl); }
  .verdict-texte { padding: var(--esp-lg) var(--esp-lg) var(--esp-lg) 0; }
  .verdict-listes { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; padding: var(--esp-xl); }
}

/* ================================================================ Fiche technique */
.fiche { margin: var(--esp-md) 0 var(--esp-xl) !important; }
.fiche table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-grand); overflow: hidden; font-size: var(--t-ui); }
.fiche caption { caption-side: top; text-align: left; padding: 0 0 10px; font-family: var(--police-titre); font-weight: 720; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--encre); }
.fiche th, .fiche td { padding: 11px 16px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.fiche tr:last-child th, .fiche tr:last-child td { border-bottom: 0; }
.fiche th { width: 40%; font-weight: 650; color: var(--encre-2); font-size: var(--t-petit); background: var(--papier-2); }
.fiche td { font-variant-numeric: tabular-nums; }
.fiche .note { margin-top: var(--esp-xs); }

/* ================================================================ Variantes */
.variantes { margin: var(--esp-md) 0 var(--esp-xl) !important; padding: var(--esp-md) var(--esp-lg); background: var(--papier-2); border-radius: var(--rayon-grand); display: grid; gap: var(--esp-sm); }
.variantes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.variantes li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--esp-md); padding: 12px 0; border-bottom: 1px solid var(--trait); margin: 0; }
.variantes li:last-child { border-bottom: 0; }
.variante-nom { font-family: var(--police-titre); font-weight: 720; letter-spacing: -0.01em; }
.variante-surface, .variante-note { grid-column: 1; font-size: var(--t-petit); color: var(--encre-3); }
.variantes .cta-amazon { grid-column: 2; grid-row: 1 / span 3; min-height: 44px; padding: 4px 10px 4px 14px; font-size: var(--t-petit); box-shadow: none; }
.variantes .cta-logo { width: 50px; }

/* ================================================================ Encart produit */
.encart { margin: var(--esp-lg) 0 var(--esp-xl) !important; display: grid; grid-template-columns: 104px 1fr; gap: var(--esp-md); padding: 10px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-grand); }
.encart-visuel { border-radius: 16px; overflow: hidden; background: var(--tuile); aspect-ratio: 1; align-self: start; }
.encart-visuel img, .encart-visuel svg { width: 100%; height: 100%; object-fit: cover; }
.encart-texte { display: grid; gap: var(--esp-xs); min-width: 0; padding: 6px 8px 10px 0; }
.encart-nom { font-family: var(--police-titre); font-weight: 750; font-size: 1.3125rem; line-height: 1.15; letter-spacing: -0.02em; }
.encart .cotes { margin: 4px 0; }
@media (min-width: 640px) { .encart { grid-template-columns: 180px 1fr; gap: var(--esp-lg); } .encart-texte { padding: 14px 14px 14px 0; } }

/* ================================================================ Accessoires */
.accessoires { list-style: none; margin: var(--esp-md) 0 var(--esp-xl) !important; padding: 0 !important; display: grid; gap: 10px; }
.accessoire { display: grid; gap: var(--esp-sm); padding: var(--esp-md) var(--esp-lg); background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-grand); margin: 0 !important; }
.accessoire-nom { font-family: var(--police-titre); font-weight: 720; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.015em; }
.accessoire-pour { color: var(--encre-2); }
.accessoire-details { font-size: var(--t-petit); color: var(--encre-3); }
@media (min-width: 720px) { .accessoire { grid-template-columns: 1fr auto; align-items: center; gap: var(--esp-lg); } .accessoire-action { text-align: right; } }

/* ================================================================ Blocs de contenu */
.sommaire { margin: var(--esp-md) 0 var(--esp-xl) !important; padding: var(--esp-md) var(--esp-lg) var(--esp-lg); border-radius: var(--rayon-grand); background: var(--papier-2); }
.sommaire .surtitre { color: var(--encre-2); }
.sommaire ol { margin: var(--esp-sm) 0 0; padding: 0; list-style: none; counter-reset: som; columns: 1; font-size: var(--t-ui); }
.sommaire li { counter-increment: som; break-inside: avoid; margin: 0 0 6px; display: grid; grid-template-columns: 2rem 1fr; }
.sommaire li::before { content: counter(som, decimal-leading-zero); font-family: var(--police-titre); font-weight: 750; color: var(--vert); font-size: var(--t-petit); padding-top: 1px; }
.sommaire a { color: var(--encre); text-decoration-color: var(--trait-fort); }
.sommaire a:hover { text-decoration-color: var(--herbe); }
@media (min-width: 720px) { .sommaire ol { columns: 2; column-gap: var(--esp-2xl); } }

.encadre { padding: var(--esp-md) var(--esp-lg); background: var(--herbe-pale); border-radius: var(--rayon-grand); }
.encadre.attention { background: var(--brique-pale); }
.encadre > * + * { margin-top: var(--esp-xs); }

.grille-2 { display: grid; gap: var(--esp-lg); margin: var(--esp-md) 0 var(--esp-xl) !important; }
@media (min-width: 760px) { .grille-2 { grid-template-columns: 1fr 1fr; } }
.grille-2 > div { display: grid; gap: var(--esp-sm); align-content: start; padding: var(--esp-lg); background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-grand); }

/* Technologies de guidage : cartes colorées (même code couleur que les packshots) */
.techno { display: grid; gap: 12px; margin: var(--esp-md) 0 var(--esp-xl) !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.techno > div { display: grid; gap: 8px; align-content: start; padding: var(--esp-lg); background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-grand); position: relative; overflow: hidden; }
.techno > div::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--tuile, var(--herbe-pale)); }
.techno > div.t-lidar { --tuile: oklch(80% 0.07 130); }
.techno > div.t-rtk, .techno > div.t-netrtk { --tuile: oklch(80% 0.06 235); }
.techno > div.t-camera { --tuile: oklch(84% 0.07 80); }
.techno > div.t-fil { --tuile: oklch(80% 0.07 42); }
.techno h3, .techno h4 { font-size: 1.25rem; font-family: var(--police-titre); margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
.techno p { font-size: var(--t-ui); color: var(--encre-2); }
.techno .rdt-figure { margin: -24px -24px 8px; }
.techno .rdt-figure img { border-radius: 0; aspect-ratio: 16 / 10; }
.techno dl { margin: 0; display: grid; gap: 4px; font-size: var(--t-ui); }
.techno dl div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--esp-xs); }
.techno dt { font-weight: 650; color: var(--encre-2); }
.techno dd { margin: 0; }

details.faq { border-bottom: 1px solid var(--trait); margin: 0 !important; }
details.faq:first-of-type { border-top: 1px solid var(--trait); }
details.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--esp-md); padding: 18px 0; font-family: var(--police-titre); font-weight: 700; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.015em; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--papier-2); color: var(--vert); font-size: 1.375rem; line-height: 1; font-weight: 500; transition: background-color .2s var(--sortie); }
details.faq[open] summary::after { content: "–"; background: var(--herbe-pale); }
details.faq summary:hover::after { background: var(--herbe-pale); }
details.faq > div { padding: 0 0 var(--esp-lg); color: var(--encre-2); display: grid; gap: var(--esp-xs); max-width: 40rem; }
.page-contenu > details.faq + :not(details) { margin-top: var(--esp-lg); }

.liens-suite { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0 !important; }
.liens-suite li { margin: 0; }
.liens-suite a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--trait-fort); border-radius: 999px; text-decoration: none; font-family: var(--police-titre); font-weight: 650; font-size: var(--t-ui); background: var(--carte); color: var(--encre); transition: background-color .15s var(--sortie), border-color .15s var(--sortie); }
.liens-suite a::after { content: "→"; color: var(--vert); }
.liens-suite a:hover { border-color: var(--foret); background: var(--foret); color: var(--sur-foret); }
.liens-suite a:hover::after { color: var(--herbe-vif); }

table.simple { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-ui); background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-grand); overflow: hidden; }
table.simple th, table.simple td { padding: 11px 14px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
table.simple tr:last-child > * { border-bottom: 0; }
table.simple thead th { background: var(--papier-2); font-family: var(--police-titre); font-weight: 700; font-size: var(--t-petit); color: var(--encre-2); }
table.simple tbody th { font-weight: 650; }
.defil-x { position: relative; overflow-x: auto; border-radius: var(--rayon-grand); }
.defil-x table { min-width: 0; }
.defil-x.large table, .defil-x table.large { min-width: 560px; }

.mention-partenaire { font-size: var(--t-petit); color: var(--encre-3); }
.alerte { background: var(--brique-pale); padding: var(--esp-sm); border-radius: var(--rayon); }

/* Guides (vignettes photo) : liste de liens illustrés */
.guides { list-style: none; margin: var(--esp-md) 0 var(--esp-2xl) !important; padding: 0 !important; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); grid-column: large !important; }
.guides li { margin: 0; }
.guides a { display: grid; gap: 10px; padding: 8px 8px 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-grand); text-decoration: none; color: var(--encre); transition: box-shadow .25s var(--sortie), transform .25s var(--sortie); }
.guides a:hover { box-shadow: var(--ombre); transform: translateY(-2px); color: var(--encre); }
.guides img, .guides .rdt-img-repli { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 17px; background: var(--herbe-pale); }
.guides strong { display: block; padding: 0 8px; font-family: var(--police-titre); font-weight: 740; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.015em; }
.guides small { display: block; padding: 0 8px; font-size: var(--t-petit); color: var(--encre-3); }

/* ================================================================ Barre d'achat mobile */
.barre-mobile {
  position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: var(--z-barre);
  background: var(--carte); border: 1px solid var(--trait); border-radius: 20px;
  padding: 8px 8px 8px 14px; box-shadow: 0 18px 40px -16px oklch(20% 0.05 155 / .5);
  transform: translateY(0); transition: transform .3s var(--sortie), opacity .3s var(--sortie);
}
.barre-mobile[hidden] { display: block; transform: translateY(140%); opacity: 0; visibility: hidden; }
.barre-interieur { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; max-width: 40rem; margin: 0 auto; }
.barre-nom { display: grid; line-height: 1.2; min-width: 0; }
.barre-nom span { font-size: var(--t-legal); color: var(--encre-3); }
.barre-nom strong { font-family: var(--police-titre); font-weight: 720; font-size: .95rem; line-height: 1.15; letter-spacing: -0.01em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.barre-mobile .cta-amazon { min-height: 46px; padding: 4px 10px 4px 14px; font-size: var(--t-petit); gap: 8px; box-shadow: none; }
.barre-mobile .cta-logo { width: 50px; }
.barre-fermer { width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.5rem; color: var(--encre-3); cursor: pointer; border-radius: 50%; }
@media (min-width: 1024px) { .barre-mobile { display: none !important; } }
body.a-barre .pied { padding-bottom: 96px; }

/* ================================================================ Pied de page */
.pied { position: relative; background: var(--foret); color: var(--sur-foret-2); margin-top: var(--esp-2xl); overflow: hidden; }
.pied::before { content: ""; position: absolute; inset: 0; background: var(--bandes-foret); opacity: .5; pointer-events: none; }
.pied > * { position: relative; }
.pied a { color: var(--sur-foret); text-decoration: none; }
.pied a:hover { color: var(--herbe-vif); text-decoration: underline; }
.pied-interieur { max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto; padding: var(--esp-3xl) var(--gouttiere) var(--esp-xl); display: grid; gap: var(--esp-xl); }
.pied .marque { color: var(--carte); }
.pied .marque-nom span { color: var(--herbe-vif); }
.pied .marque-sous { display: block; color: var(--sur-foret-2); }
.pied-marque { display: grid; gap: var(--esp-md); max-width: 30rem; font-size: var(--t-ui); }
.pied .mention-partenaire { color: var(--sur-foret-2); }
.pied-titre { font-family: var(--police-titre); font-weight: 720; color: var(--carte); margin-bottom: var(--esp-xs); letter-spacing: -0.01em; }
.pied-colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pied-colonne a { display: inline-block; padding: 6px 0; font-size: var(--t-ui); }
.pied-bas { max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto; padding: var(--esp-md) var(--gouttiere) var(--esp-xl); border-top: 1px solid oklch(42% 0.05 150); display: grid; gap: var(--esp-xs); font-size: var(--t-petit); color: var(--sur-foret-2); }
@media (min-width: 800px) { .pied-interieur { grid-template-columns: 2fr 1fr 1fr 1fr; } }

@media print {
  .entete, .pied, .barre-mobile, .selecteur, .filtres, .cta-amazon, .page-visuel { display: none !important; }
  body { background: #fff; }
}

/* ================================================================ Épure mobile (29/09/2026) */
/* Actions produit : même empilement partout sur téléphone (cartes, encarts, sélecteur, verdict). */
@media (max-width: 639px) {
  .carte-actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
  .carte-actions .cta-amazon { width: 100%; }
  .carte-actions + .lien-remunere, .verdict-actions .lien-remunere { text-align: center; }
  .carte-corps > .lien-remunere { margin-top: -2px; }
  .resultat { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .resultat::before { font-size: 1.75rem; }
}
.cta-amazon { text-align: center; }

/* Comparatif : fiches compactes sur téléphone (plus de défilement horizontal ni de colonnes coupées). */
@media (max-width: 899px) {
  .tableau-defil { overflow: visible; border: 0; background: transparent; border-radius: 0; }
  .tableau table { min-width: 0; display: block; }
  .tableau thead { display: none; }
  .tableau tbody { display: grid; gap: 10px; }
  .tableau tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 14px 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; }
  .tableau tbody tr[hidden] { display: none; }
  .tableau tbody tr:hover > * { background: transparent; }
  .tableau tbody th, .tableau td { position: static; min-width: 0; max-width: none; box-shadow: none; border: 0; padding: 0; background: transparent; }
  .tableau tbody th { flex: 1 1 100%; margin-bottom: 2px; }
  .tableau td { flex: none; font-size: var(--t-petit); }
  .tableau td:nth-child(2), .tableau td:nth-child(3), .tableau td:nth-child(6) { background: var(--papier-2); border-radius: 999px; padding: 5px 10px; }
  .tableau td:nth-child(2)::before { content: "Surface "; color: var(--encre-3); }
  .tableau td:nth-child(3)::before { content: "Pente "; color: var(--encre-3); }
  .tableau td:nth-child(6)::before { content: "Budget "; color: var(--encre-3); }
  .tableau td:nth-child(4) { padding: 5px 2px; }
  .tableau td:nth-child(5) { display: none; }
  .tableau td:last-child { flex: 1 1 100%; margin-top: 6px; }
  .tableau td:last-child .cta-amazon { width: 100%; min-height: 44px; }
  .tableau td:last-child .lien-remunere { text-align: center; }
  .tableau td:nth-child(6):empty, .tableau td:nth-child(6):empty::before { display: none; }
}
/* Comparatif mobile compact : nom + bouton sur la première ligne, caractéristiques dessous. */
@media (max-width: 899px) {
  .tableau tbody tr { padding: 10px 12px 12px; gap: 6px; }
  .tableau tbody th { flex: 1 1 calc(100% - 8.5rem); order: 0; margin: 0; }
  .tableau td:last-child { flex: none; order: 1; margin: 0; text-align: center; }
  .tableau td:last-child .cta-amazon { width: auto; min-height: 40px; padding: 4px 14px; font-size: var(--t-petit); box-shadow: none; }
  .tableau td:last-child .lien-remunere { margin-top: 3px; font-size: .6875rem; }
  .tableau td:nth-child(2), .tableau td:nth-child(3), .tableau td:nth-child(4), .tableau td:nth-child(6) { order: 2; padding: 4px 9px; font-size: .8125rem; }
  .tableau td:nth-child(4) { background: transparent; padding: 4px 2px; }
  .modele-nom { font-size: .9375rem; }
}
@media (max-width: 899px) {
  .tableau td:nth-child(2)::before, .tableau td:nth-child(6)::before { content: none; }
  .tableau td:nth-child(2), .tableau td:nth-child(3), .tableau td:nth-child(6) { padding: 3px 8px; }
  .tableau td:nth-child(4) .pastille { gap: 5px; }
}
/* Avis sur téléphone : le packshot du verdict en bandeau (la photo d'en-tête est déjà au-dessus). */
@media (max-width: 859px) {
  .verdict-visuel { aspect-ratio: 16 / 9; max-height: 220px; }
  .verdict-visuel img, .verdict-visuel svg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
}

/* ================================================================ Allègement (29/09/2026, 2e passe) */
.carte-cotes { margin: -2px 0 0; font-family: var(--police-titre); font-weight: 650; font-size: var(--t-ui); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.carte-pour { margin: 0; font-size: var(--t-ui); line-height: 1.45; color: var(--encre-2); }
.carte-pour strong { color: var(--vert); font-family: var(--police-titre); font-weight: 720; }
.carte-corps { gap: 10px; }
.tableau-plus {
  justify-self: center; min-height: 44px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  background: var(--carte); border: 1px solid var(--trait-fort); color: var(--encre);
  font-family: var(--police-titre); font-weight: 680; font-size: var(--t-ui);
}
.tableau-plus:hover { border-color: var(--encre); }
@media (max-width: 639px) {
  .carte { grid-template-columns: 88px minmax(0, 1fr); padding: 12px 14px 14px; row-gap: 8px; }
  .carte-visuel > a { grid-row: 1 / span 3; }
  .carte-nom { font-size: 1.125rem; }
  .carte-marque { font-size: .75rem; }
  .carte-corps > .carte-cotes, .carte-corps > .carte-pour { grid-column: 1 / -1; }
  .carte-badge { font-size: .75rem; padding: 4px 10px 4px 22px; }
  .carte-badge::before { left: 9px; width: 7px; height: 7px; margin-top: -3.5px; }
  .carte-actions .cta-amazon { min-height: 46px; }
  .verdict-listes li { font-size: var(--t-ui); }
}
details.fiche { border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--carte); }
details.fiche > summary { cursor: pointer; list-style: none; padding: 14px 18px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--police-titre); font-weight: 700; }
details.fiche > summary::-webkit-details-marker { display: none; }
details.fiche > summary::after { content: "+"; font-size: 1.25rem; color: var(--vert); }
details.fiche[open] > summary::after { content: "–"; }
details.fiche > div { padding: 0 12px 12px; }

/* ================================================================ Prix relevés (datés) */
.prix-releve { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.prix-releve strong { font-family: var(--police-titre); font-size: 1.375rem; font-weight: 780; letter-spacing: -0.02em; color: var(--encre); font-variant-numeric: tabular-nums; }
.prix-releve span { font-size: var(--t-petit); color: var(--encre-3); }
.verdict .prix-releve { margin: 4px 0 2px; }
.accessoire .prix-releve strong { font-size: 1.125rem; }
.variante-prix { font-family: var(--police-titre); font-weight: 700; font-size: var(--t-petit); color: var(--encre); }
.tableau td strong { font-family: var(--police-titre); font-weight: 750; }

/* ================================================================ Largeurs intermédiaires (fenêtre réduite, tablette) */
/* Cartes compactes (vignette à gauche) jusqu'à 1 023 px : 1 colonne, puis 2 à partir de 760 px. */
@media (max-width: 1023px) {
  .cartes { gap: var(--esp-md); grid-template-columns: minmax(0, 1fr); }
  .carte { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: none; column-gap: 14px; row-gap: 8px; padding: 12px 14px 14px; align-items: start; border-radius: 20px; }
  .carte-visuel, .carte-corps { display: contents; }
  .carte-visuel > a { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 1; height: auto; border-radius: 14px; overflow: hidden; background: var(--tuile); }
  .carte-badge { position: relative; left: auto; top: auto; grid-column: 2; grid-row: 1; justify-self: start; max-width: 100%; box-shadow: none; background: var(--papier-2); font-size: .75rem; padding: 4px 10px 4px 22px; }
  .carte-badge::before { left: 9px; width: 7px; height: 7px; margin-top: -3.5px; }
  .carte-marque { grid-column: 2; grid-row: 2; align-self: end; font-size: .75rem; }
  .carte-nom { grid-column: 2; grid-row: 3; margin-top: -4px; font-size: 1.125rem; }
  .carte-corps > .carte-cotes, .carte-corps > .prix-releve, .carte-corps > .carte-pour, .carte-corps > .cotes, .carte-corps > .pour-pas-pour, .carte-actions, .carte-corps > .lien-remunere { grid-column: 1 / -1; }
  .carte-actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
  .carte-actions .cta-amazon { width: 100%; min-height: 46px; }
  .carte-corps > .lien-remunere { text-align: center; margin-top: -2px; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* Bureau : 3 colonnes, image moins haute. */
@media (min-width: 1024px) {
  .cartes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
  .carte-visuel { aspect-ratio: 4 / 3; }
  .carte-visuel img, .carte-visuel svg { object-fit: cover; object-position: 50% 55%; }
  /* Boutons alignés en bas de chaque carte d'une même rangée. */
  .carte-corps { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .carte-corps > .carte-actions { margin-top: auto; padding-top: 4px; }
}
/* Résultats du sélecteur : même empilement que les cartes jusqu'à 1 023 px. */
@media (max-width: 1023px) {
  .resultat .carte-actions .cta-amazon { width: 100%; }
  .resultat .lien-remunere { text-align: center; }
}

/* ================================================================ Prix mis en valeur + badge Amazon (29/09/2026) */
.prix-releve { margin: 2px 0 0; display: grid; gap: 1px; justify-items: start; }
.prix-releve strong { font-family: var(--police-titre); font-size: 1.875rem; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: var(--encre); font-variant-numeric: tabular-nums; }
.prix-releve span { font-size: .8125rem; color: var(--encre-3); }
.verdict .prix-releve strong { font-size: 2.25rem; }
.accessoire .prix-releve strong { font-size: 1.375rem; }
.cta-amazon { gap: 10px; padding: 6px 12px 6px 20px; }
.cta-amazon .cta-logo { width: 62px; height: auto; flex: none; margin-top: 3px; }
.tableau td .cta-amazon, .variantes .cta-amazon, .barre-mobile .cta-amazon { padding: 4px 10px 4px 14px; gap: 6px; }
.tableau td .cta-amazon .cta-logo, .variantes .cta-amazon .cta-logo, .barre-mobile .cta-amazon .cta-logo { width: 48px; }
.variante-prix { font-size: 1rem; font-weight: 780; }
@media (max-width: 1023px) {
  .carte-corps > .prix-releve { grid-column: 1 / -1; }
  .prix-releve strong { font-size: 1.75rem; }
}
.variante-prix { display: grid; gap: 0; margin-top: 2px; }
.variante-prix strong { font-family: var(--police-titre); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--encre); }
.variante-prix small { font-family: var(--police-texte); font-size: .75rem; font-weight: 400; color: var(--encre-3); }

/* Liste illustrée des conseils et des duels ([rdt_pages], « À lire ensuite ») */
.liste-pages, .page-contenu > .liste-pages { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 14px; }
.liste-pages li { margin: 0; padding: 0; }
.liste-pages li::before, .liste-pages li::marker { content: none; }
.liste-pages a {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 10px; background: var(--carte); border: 1px solid var(--trait); border-radius: 20px;
  color: var(--encre); text-decoration: none; transition: box-shadow .25s ease;
}
.liste-pages a:hover { box-shadow: var(--ombre); }
.liste-pages a > img, .liste-pages a > svg, .liste-pages .liste-duo { width: 112px; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 14px; }
.liste-pages .liste-duo { display: flex; align-items: center; gap: 2px; background: var(--papier-2); overflow: hidden; }
.liste-pages .liste-duo-robot { flex: 1; min-width: 0; }
.liste-pages .liste-duo-robot img { width: 100%; height: auto; }
.liste-pages .liste-duo-vs { font-size: .75rem; font-weight: 700; color: var(--encre-3); }
.liste-texte { display: grid; gap: 4px; min-width: 0; }
.liste-texte h2, .liste-texte h3 { margin: 0; font-size: 1.0625rem; line-height: 1.25; color: var(--encre); }
.liste-texte small { font-size: .875rem; line-height: 1.45; color: var(--encre-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.liste-lire { font-size: .875rem; font-weight: 700; color: var(--vert); }
.liste-lire::after { content: " →"; }
.liste-pages a:hover .liste-lire { text-decoration: underline; }
@media (min-width: 760px) {
  .liste-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liste-pages a { grid-template-columns: 1fr; align-items: stretch; padding: 8px 8px 16px; }
  .liste-pages a > img, .liste-pages a > svg, .liste-pages .liste-duo { width: 100%; aspect-ratio: 16 / 10; }
  .liste-texte { padding: 0 8px; }
  .liste-texte h2, .liste-texte h3 { font-size: 1.25rem; }
}

/* Sélecteur, bureau : une question par ligne (libellé à gauche, réponses à droite), résultats en 3 colonnes */
@media (min-width: 900px) {
  .selecteur-form { grid-template-columns: 1fr; row-gap: 0; padding: 8px var(--esp-xl); }
  .selecteur-form fieldset:first-child { grid-column: auto; }
  .selecteur-form fieldset { display: grid; grid-template-columns: 13rem minmax(0, 1fr); align-items: center; gap: var(--esp-md); padding: 18px 0; border-top: 1px solid oklch(45% 0.06 150 / .5); }
  .selecteur-form fieldset:first-child { border-top: 0; }
  .selecteur-form legend { float: left; width: 13rem; margin: 0; }
  .selecteur-form fieldset > .puces { grid-column: 2; }
  .selecteur-resultats { padding: var(--esp-xl); }
  .resultats-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-md); align-items: stretch; }
  .resultat { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; padding: var(--esp-md); border: 1px solid var(--trait); border-radius: 20px; background: var(--papier); }
  .resultat:last-child { padding-bottom: var(--esp-md); }
  .resultat::before { font-size: 1.75rem; }
  .resultat-corps { grid-template-rows: auto auto 1fr auto auto auto; align-content: start; }
  .resultat-corps > ul { align-self: start; }
  .resultat .prix-releve { margin-top: auto; }
  .resultat .carte-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
}

/* ================================================================ Grand écran : pleine largeur (29/09)
   Le texte n'est plus centré dans une colonne étroite : il part du bord gauche, aligné sur le titre,
   et une colonne latérale collante (notre choix + sommaire) occupe la droite. */
.page-aside { display: none; }
@media (min-width: 1180px) {
  :root { --site: 80rem; --lecture: 46rem; --aside: 19rem; }
  /* En-têtes et contenus sur la même largeur */
  .page-tete-interieur { max-width: calc(var(--site) + 2 * var(--gouttiere)); }
  .a-visuel .page-tete-interieur { padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
  .a-visuel .page-tete-interieur::before { inset: 0 calc(var(--gouttiere) - 28px) 0; }
  .page-tete h1 { max-width: 26ch; }
  /* Toutes les pages : texte calé à gauche, blocs larges sur toute la largeur utile */
  .page-contenu {
    grid-template-columns:
      [plein-start] minmax(var(--gouttiere), 1fr)
      [large-start texte-start] minmax(0, var(--lecture)) [texte-end]
      minmax(0, calc(var(--site) - var(--lecture))) [large-end]
      minmax(var(--gouttiere), 1fr) [plein-end];
  }
  /* Pages avec colonne latérale : les blocs larges s'arrêtent avant elle */
  .page-avec-aside .page-contenu {
    position: relative;
    grid-template-columns:
      [plein-start] minmax(var(--gouttiere), 1fr)
      [large-start texte-start] minmax(0, var(--lecture)) [texte-end]
      minmax(0, calc(var(--site) - var(--lecture) - var(--aside) - 3.5rem)) [large-end]
      3.5rem var(--aside)
      minmax(var(--gouttiere), 1fr) [plein-end];
  }
  .page-avec-aside .page-contenu > .sommaire { display: none; }
  /* Élément absolu d'une grille : sans placement, son bloc conteneur est toute la grille (et non la colonne texte) */
  .page-contenu > .page-aside { grid-column: auto; grid-row: auto; margin: 0; }
  .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-avec-aside .page-contenu > .reponse { grid-column: large; }
  .selecteur-form fieldset { grid-template-columns: 15rem minmax(0, 1fr); }
  .selecteur-form legend { width: 15rem; }
  .page-aside {
    display: block; position: absolute; top: var(--esp-lg); bottom: var(--esp-3xl);
    right: max(var(--gouttiere), calc((100% - var(--site)) / 2)); width: var(--aside);
  }
  .page-aside-interieur { position: sticky; top: 96px; display: grid; gap: var(--esp-md); max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; }
  .aside-etiquette { font-family: var(--police-titre); font-weight: 700; font-size: .8125rem; letter-spacing: .02em; text-transform: uppercase; color: var(--vert); margin: 0; }
  .aside-produit { display: grid; gap: 8px; padding: 14px 16px 16px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon-grand); }
  .aside-visuel { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--tuile, var(--herbe-pale)); }
  .aside-visuel img { width: 100%; height: 100%; object-fit: cover; }
  .aside-nom { margin: 2px 0 0; font-family: var(--police-titre); font-weight: 750; font-size: 1.1875rem; line-height: 1.15; letter-spacing: -0.02em; }
  .aside-cotes { margin: 0; font-size: var(--t-petit); color: var(--encre-2); }
  .aside-produit .prix-releve { margin: 4px 0 2px; }
  .aside-produit .prix-releve strong { font-size: 1.625rem; }
  .aside-produit .cta-amazon { width: 100%; justify-content: center; }
  .aside-produit .lien-remunere { text-align: center; margin-top: -2px; }
  .aside-lien { justify-self: center; font-size: var(--t-petit); font-weight: 700; color: var(--vert); }
  .aside-selecteur {
    display: grid; gap: 4px; padding: 18px 18px 20px; border-radius: var(--rayon-grand); position: relative;
    background: var(--foret); color: var(--sur-foret); text-decoration: none;
  }
  .aside-selecteur .aside-etiquette { color: var(--herbe-vif); }
  .aside-selecteur strong { font-family: var(--police-titre); font-weight: 750; font-size: 1.375rem; color: var(--carte); letter-spacing: -0.02em; }
  .aside-selecteur span { font-size: var(--t-petit); color: var(--sur-foret-2); padding-right: 2.5rem; }
  .aside-selecteur .aside-fleche { position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--herbe-vif); color: var(--foret); font-size: 1.125rem; }
  .aside-selecteur:hover .aside-fleche { background: var(--carte); }
  .aside-sommaire { padding: 14px 16px 12px; border-radius: var(--rayon-grand); background: var(--papier-2); }
  .aside-sommaire ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: as; }
  .aside-sommaire li { counter-increment: as; margin: 0; }
  .aside-sommaire a { display: grid; grid-template-columns: 1.6rem 1fr; padding: 5px 6px; border-radius: 8px; font-size: .875rem; line-height: 1.35; color: var(--encre-2); text-decoration: none; }
  .aside-sommaire a::before { content: counter(as, decimal-leading-zero); font-weight: 700; color: var(--vert); font-size: .75rem; padding-top: 2px; }
  .aside-sommaire a:hover, .aside-sommaire a.actif { background: var(--carte); color: var(--encre); }
}