/* ==========================================================================
   Slow Lune — B2B France. "La lenteur, c'est le nouveau luxe" : palette
   nuit (noir #1E1E24, lune #F0EDE6) a l'accent lila discret (#8A7BA8).
   ========================================================================== */

:root {
  --color-graphite: #1E1E24;
  --color-graphite-deep: #131317;
  --color-graphite-soft: #2A2A31;
  --color-moon: #F0EDE6;
  --color-paper: #FAF8F3;
  --color-steel: #8A8F98;
  --color-signal: #8A7BA8;
  --color-signal-bright: #A99BC7;
  --color-ink: #26262B;

  --color-line: #E4E1D8;
  --color-line-dark: #3A3A42;
  --color-moon-dim: #C9C5BA;

  --glow-moon: rgba(240, 237, 230, 0.14);
  --glow-signal: rgba(138, 123, 168, 0.42);
  --grad-graphite: radial-gradient(
      120% 120% at 82% -10%,
      rgba(240, 237, 230, 0.10) 0%,
      rgba(138, 123, 168, 0.06) 26%,
      rgba(19, 22, 26, 0) 60%
    ),
    linear-gradient(180deg, #1A1A1F 0%, #161619 60%, #131317 100%);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;

  --max-read-width: 680px;
  --max-page-width: 1240px;
  --radius: 8px;
  --radius-lg: 14px;
  --space-section: 120px;
  --space-section-sm: 72px;

  --shadow-card: 0 1px 2px rgba(34, 38, 43, 0.04),
    0 8px 24px rgba(34, 38, 43, 0.06);
  --shadow-card-lg: 0 2px 4px rgba(34, 38, 43, 0.06),
    0 22px 48px rgba(34, 38, 43, 0.12);
  --shadow-glow: 0 10px 30px rgba(138, 123, 168, 0.28);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.8;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-ink);
  text-decoration-color: var(--color-moon-dim);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.16s ease, color 0.16s ease;
}

a:hover {
  text-decoration-color: var(--color-signal);
}

:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
}

h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
}
h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
}
h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
}

p {
  margin: 0 0 1.1em;
}

.wrap {
  width: 100%;
  max-width: var(--max-page-width);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-moon);
  color: var(--color-graphite);
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: calc(var(--space-section) * 0.6);
}

.section--graphite {
  background: var(--color-graphite);
  color: var(--color-moon);
}

.section--graphite h2,
.section--graphite h3 {
  color: var(--color-moon);
}

.section--lined {
  border-top: 1px solid var(--color-line);
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin: 0 0 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--color-signal);
  flex: none;
}

.prose {
  max-width: var(--max-read-width);
}

.prose--wide {
  /* R50 — 860 px donnaient 98 caractères par ligne sur un écran de 1440 px.
     Ramené à 800 px, soit environ 90 caractères : encore large pour laisser
     respirer les paragraphes d'explication, mais dans une mesure que l'œil
     suit sans chercher le début de la ligne suivante. */
  max-width: 800px;
}

.lede {
  font-size: 1.14rem;
  color: #4a5057;
  line-height: 1.7;
  /* R50 — Sur grand écran, la chapeau d'une page occupait toute la largeur
     utile du conteneur : à 1192 px elle alignait 126 caractères par ligne,
     très au-delà des 60–85 que l'œil suit sans effort. On la ramène à une
     mesure de lecture, sans toucher au réglage mobile. */
  max-width: 780px;
}

.section--graphite .lede {
  color: #b9bcc0;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.site-header {
  background: rgba(19, 22, 26, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line-dark);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--color-moon);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand__mark {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-moon);
  box-shadow: inset -4px -2px 0 0 var(--color-graphite-deep),
    0 0 14px rgba(240, 237, 230, 0.4);
  flex: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: #cfd1d3;
  text-decoration: none;
  font-size: 0.94rem;
  padding-block: 4px;
  position: relative;
  transition: color 0.16s ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--color-signal);
  transition: width 0.2s ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  width: 100%;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--color-signal-bright);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-moon);
  color: var(--color-graphite-deep);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background-color 0.16s ease, transform 0.16s ease;
}

.header-cta:hover {
  background: #fff;
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius);
  color: var(--color-moon);
  padding: 8px 12px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* --- Trust-Bar (Zertifikate + Kenndaten) ------------------------------- */

.trustbar {
  background: var(--color-graphite-deep);
  border-bottom: 1px solid var(--color-line-dark);
  color: #b9bcc0;
}

.trustbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-block: 11px;
  flex-wrap: wrap;
}

.trustbar__certs {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.trustbar__certs li {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: #d9d6cd;
  border: 1px solid var(--color-line-dark);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: default;
}

.trustbar__facts {
  display: flex;
  align-items: center;
  gap: 8px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

.trustbar__facts strong {
  color: var(--color-moon);
  font-weight: 600;
}

/* --- Laufzeitzähler im Hero ---------------------------------------------
   Der Streifen bleibt ausgeblendet, bis ein gemessener Wert vorliegt.
   Die Regel [hidden] muss ausgeschrieben werden: die display-Regel der
   Autorenschaft schlägt sonst das [hidden] { display: none } des Browsers,
   und der Streifen erschiene als leerer Block. */

.live-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--color-moon-dim);
}

.live-trust[hidden] {
  display: none;
}

.live-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-signal);
  animation: live-pulse 2.6s ease-out infinite;
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--glow-signal);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(138, 123, 168, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(138, 123, 168, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
    box-shadow: 0 0 0 3px var(--glow-signal);
  }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  background: var(--grad-graphite);
  color: var(--color-moon);
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 128px);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 50% at 84% 12%,
    var(--glow-signal) 0%,
    rgba(138, 123, 168, 0) 55%
  );
  opacity: 0.7;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 56px;
  align-items: center;
  position: relative;
}

.hero h1 {
  color: var(--color-moon);
  margin-bottom: 0.45em;
}

.hero h1 .accent {
  background: linear-gradient(100deg, var(--color-moon), var(--color-signal-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  font-size: 1.18rem;
  color: #c4c7cb;
  max-width: 620px;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero__meta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 0.88rem;
  color: #9aa0a6;
  list-style: none;
  padding: 0;
}

.hero__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero__meta li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-signal);
  box-shadow: 0 0 10px var(--glow-signal);
  flex: none;
}

/* Mondphase — 24s Zyklus, reine CSS-Animation */
.moon-wrap {
  display: flex;
  justify-content: center;
  position: relative;
}

.moon-wrap::after {
  content: "";
  position: absolute;
  width: clamp(220px, 30vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(240, 237, 230, 0.16);
  box-sizing: border-box;
}

.moon {
  position: relative;
  width: clamp(160px, 22vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(
    circle at 34% 28%,
    #ffffff 0%,
    var(--color-moon) 44%,
    #cbc7bb 100%
  );
  box-shadow: 0 0 90px rgba(240, 237, 230, 0.22),
    inset -10px -6px 24px rgba(19, 22, 26, 0.35);
}

.moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-graphite-deep);
  animation: lunar 13s ease-in-out infinite alternate;
}

@keyframes lunar {
  0% {
    transform: translateX(-104%);
  }
  100% {
    transform: translateX(104%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .moon::after {
    animation: none;
    transform: translateX(-58%);
  }
}

/* --- Schaltflächen ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.btn--primary {
  background: var(--color-moon);
  color: var(--color-graphite-deep);
  box-shadow: 0 8px 22px rgba(240, 237, 230, 0.18);
}

.btn--primary:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(240, 237, 230, 0.26);
}

.btn--ghost {
  background: transparent;
  color: var(--color-moon);
  border-color: #4a5057;
}

.btn--ghost:hover {
  border-color: var(--color-moon);
}

.btn--dark {
  background: var(--color-graphite);
  color: var(--color-moon);
}

.btn--dark:hover {
  background: #000;
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}

.btn--outline:hover {
  border-color: var(--color-graphite);
}

.btn--whatsapp {
  background: #1f8f5f;
  color: #fff;
}

.btn--whatsapp:hover {
  background: #17734c;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(31, 143, 95, 0.32);
}

.btn--glow {
  background: linear-gradient(100deg, var(--color-signal), var(--color-signal-bright));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 30px var(--glow-signal);
}

.btn--glow:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 14px 38px var(--glow-signal);
}

/* --- Manifest ----------------------------------------------------------- */

.manifest {
  text-align: center;
}

.manifest p {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.4vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 600;
}

/* --- Pills / Keyword-Badges --------------------------------------------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--color-graphite);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 7px 15px;
}

.section--graphite .pill {
  color: var(--color-moon);
  background: transparent;
  border-color: var(--color-line-dark);
}

.pill .pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-signal);
  flex: none;
}

/* --- Kartenraster ------------------------------------------------------- */

.grid {
  display: grid;
  gap: 22px;
}

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

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

.card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-lg);
  border-color: #d3d0c8;
}

.card--graphite {
  background: var(--color-graphite-soft);
  border-color: var(--color-line-dark);
  color: var(--color-moon);
}

.card--graphite h3 {
  color: var(--color-moon);
}

.card--graphite p {
  color: #b9bcc0;
}

.card__num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-signal);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 12px;
}

.card h3 {
  margin-bottom: 0.45em;
}

.card p:last-child {
  margin-bottom: 0;
}

.card__link {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-signal);
  text-decoration: none;
}

.card__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Zahlenleiste ------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat {
  background: var(--color-paper);
  padding: 30px 24px;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 600;
  display: block;
  line-height: 1.1;
  margin-bottom: 8px;
  color: var(--color-graphite);
}

.stat__label {
  font-size: 0.86rem;
  /* R61 — le libellé portait `--color-steel` (#8a8f98) sur le papier, soit
     3,06:1 à 13,8 px : sous le seuil AA. Il est plus important que la note
     du dessous, il passe donc plus sombre qu'elle — 7,9:1. */
  color: #4a5057;
  display: block;
}

.stat__note {
  font-size: 0.78rem;
  /* R61 — même correction que `.note` en R59 : #8a8f98 sur le papier ne
     donne que 3,06:1, sous le seuil AA de 4,5:1 pour du texte de 12,5 px.
     #63686f donne 5,29:1 sans changer de famille de gris. Mesuré ici sur
     les quatre colonnes de /a-propos/ : ce sont les deux seules teintes de
     la bande chiffrée à passer sous le seuil. */
  color: #63686f;
  display: block;
  margin-top: 6px;
}

/* --- Markt-Block (Marktgröße / Wachstum) ------------------------------- */

.market {
  background: var(--color-graphite);
  color: var(--color-moon);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}

.market::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    80% 120% at 12% 0%,
    rgba(138, 123, 168, 0.16) 0%,
    rgba(19, 22, 26, 0) 55%
  );
  pointer-events: none;
}

.market__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  position: relative;
}

.market h2 {
  color: var(--color-moon);
}

.market__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line-dark);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-line-dark);
}

.market__fig {
  background: rgba(255, 255, 255, 0.03);
  padding: 22px 20px;
}

.market__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  display: block;
  color: #fff;
}

.market__num span {
  color: var(--color-signal-bright);
}

.market__cap {
  font-size: 0.82rem;
  color: #9aa0a6;
  display: block;
  margin-top: 8px;
}

.market__src {
  font-size: 0.78rem;
  color: #8d9297;
  margin-top: 22px;
}

/* --- Prozess-Timeline (4 Schritte) -------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.timeline li {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 26px 26px 26px 84px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-lg);
}

.timeline li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  left: 22px;
  top: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--color-graphite), #161619);
  box-shadow: 0 6px 16px rgba(34, 38, 43, 0.22);
}

.timeline {
  counter-reset: step;
}

.timeline li::after {
  content: "";
  position: absolute;
  left: 43px;
  top: 70px;
  bottom: -18px;
  width: 1px;
  background: var(--color-line);
}

.timeline li:last-child::after {
  display: none;
}

.timeline h3 {
  margin-bottom: 0.35em;
  font-size: 1.1rem;
}

.timeline p {
  margin: 0;
  font-size: 0.95rem;
  color: #4a5057;
}

/* --- Zertifikats-Reihe -------------------------------------------------- */

.cert-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 116px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}

.cert__abbr {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-graphite);
}

.cert__title {
  font-size: 0.74rem;
  color: var(--color-steel);
  line-height: 1.35;
}

.section--graphite .cert {
  background: var(--color-graphite-soft);
  border-color: var(--color-line-dark);
}

.section--graphite .cert__abbr {
  color: var(--color-moon);
}

.section--graphite .cert__title {
  color: #9aa0a6;
}

/* --- Referenz ----------------------------------------------------------- */

.reference {
  border-left: 3px solid var(--color-signal);
  padding-left: 26px;
  max-width: 780px;
}

.reference blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2.1vw, 1.42rem);
  line-height: 1.5;
}

.reference cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-steel);
}

/* --- Brotkrumen --------------------------------------------------------- */

.breadcrumbs {
  font-size: 0.85rem;
  color: var(--color-steel);
  padding-block: 20px 0;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.breadcrumbs li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--color-moon-dim);
}

.breadcrumbs a {
  color: var(--color-steel);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

/* --- Antwortblock (AIO/GEO) --------------------------------------------- */

.answer {
  background: #fff;
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-signal);
  border-radius: var(--radius);
  padding: 28px 30px;
  max-width: 860px;
  box-shadow: var(--shadow-card);
}

.answer p {
  margin: 0;
  font-size: 1.06rem;
}

.answer p + p {
  margin-top: 1em;
}

.answer__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-size: 0.88rem;
  color: var(--color-steel);
}

.answer__facts strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* --- Seite / Produkt ---------------------------------------------------- */

.page-head {
  padding-block: 26px 0;
}

.product {
  border-top: 1px solid var(--color-line);
  padding-block: 0;
  scroll-margin-top: 84px;
}

/* R54 — les neuf fiches se replient.

   Dépliées, elles faisaient 9 800 px : une page de 26 000 px, soit neuf
   écrans de fiche technique avant le premier paragraphe éditorial. Le
   contenu reste dans le document (rien n'est retiré de l'index), seule sa
   présentation change : une ligne par référence, la fiche s'ouvre au clic.
   Le dépliant est un <details> natif — pas de JS requis pour lire, pas de
   piège clavier, et la recherche du navigateur trouve quand même le texte. */
.product__sum {
  display: block;
  list-style: none;
  cursor: pointer;
  padding-block: 30px 26px;
  transition: background-color 0.2s ease;
}

.product__sum::-webkit-details-marker {
  display: none;
}

.product__sum::marker {
  content: "";
}

.product__sum:hover {
  background-color: rgba(138, 123, 168, 0.05);
}

.product__sum:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: -2px;
}

.product[open] > .product__sum {
  padding-bottom: 26px;
}

.product[open] > .product__sum:hover {
  background-color: transparent;
}

.product > .wrap {
  padding-bottom: 62px;
}

.product__head-name {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.product__toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-steel);
  white-space: nowrap;
}

/* Le signe est dessiné, pas écrit : deux traits qui pivotent, pour que
   l'état ouvert et l'état fermé aient exactement la même largeur. */
.product__toggle-sign {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.product__toggle-sign::before,
.product__toggle-sign::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s ease;
}

.product__toggle-sign::after {
  transform: rotate(90deg);
}

.product[open] .product__toggle-sign::after {
  transform: rotate(0deg);
}

.product[open] .product__toggle {
  color: var(--color-signal);
}

@media (prefers-reduced-motion: reduce) {
  .product__toggle-sign::before,
  .product__toggle-sign::after {
    transition: none;
  }
}

/* Fiche atteinte depuis la grille de cartes : un halo bref confirme la
   destination sans rien deplacer (aucune propriete de mise en page animee). */
.product.is-arrived {
  animation: fiche-arrivee 1.5s ease-out both;
}

@keyframes fiche-arrivee {
  0% {
    background-color: rgba(138, 123, 168, 0.17);
    box-shadow: inset 3px 0 0 0 rgba(138, 123, 168, 0.75);
  }
  100% {
    background-color: rgba(138, 123, 168, 0);
    box-shadow: inset 3px 0 0 0 rgba(138, 123, 168, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product.is-arrived {
    animation: none;
  }
}

.product:first-of-type {
  border-top: none;
}

.product:first-of-type > .product__sum {
  padding-top: 20px;
}

.product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.product__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.product__sku {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
  font-weight: 600;
}

.product__kicker {
  font-size: 0.82rem;
  color: var(--color-signal);
  border: 1px solid rgba(138, 123, 168, 0.35);
  border-radius: 999px;
  padding: 2px 11px;
  display: inline-block;
}

.product__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

/* Les vues 4 à 6 restent dans le document (la visionneuse les lit) mais
   n'occupent pas la grille : la fiche annonce trois visuels, la visionneuse
   en propose six. */
.shot {
  margin: 0;
}

.shot--viewer-only {
  display: none;
}

.shot__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  cursor: zoom-in;
  overflow: hidden;
  background:
    radial-gradient(76% 76% at 50% 32%, rgba(138, 123, 168, 0.16) 0%, rgba(138, 123, 168, 0) 70%),
    linear-gradient(168deg, #f7f4f0 0%, #efeae4 60%, #e8e2db 100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease, border-color 0.3s ease;
}

.shot__btn img {
  display: block;
  width: 100%;
  height: auto;
  padding: 11%;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.shot__btn:hover,
.shot__btn:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(138, 123, 168, 0.5);
  box-shadow: var(--shadow-card-lg);
}

.shot__btn:hover img,
.shot__btn:focus-visible img {
  transform: scale(1.06);
}

.shot__zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(30, 30, 36, 0.78);
  color: var(--color-moon);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.shot__btn:hover .shot__zoom,
.shot__btn:focus-visible .shot__zoom {
  opacity: 1;
  transform: none;
}

.product__gallery-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-steel);
}

.product__gallery-count {
  flex: none;
  padding: 3px 9px;
  border: 1px solid rgba(138, 123, 168, 0.35);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-signal);
}

@media (prefers-reduced-motion: reduce) {
  .shot__btn,
  .shot__btn img,
  .shot__zoom {
    transition: none;
  }

  .shot__btn:hover,
  .shot__btn:focus-visible,
  .shot__btn:hover img,
  .shot__btn:focus-visible img {
    transform: none;
  }
}

.product__usp {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.product__usp li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 0.98rem;
}

.product__usp li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--color-signal);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-bottom: 24px;
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}

.spec-table th {
  color: var(--color-steel);
  font-weight: 500;
  width: 42%;
  padding-right: 18px;
}

.spec-table td {
  font-weight: 500;
}

.procure {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.procure dl {
  margin: 0 0 20px;
  display: grid;
  gap: 12px;
}

.procure dt {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.procure dd {
  margin: 3px 0 0;
  font-size: 0.98rem;
  font-weight: 500;
}

/* Deux boutons empiles par defaut : en colonne etroite, « Demander un
   echantillon » se coupait sur trois lignes a cote d'un « Devis pour
   EVo-062 » sur deux, d'ou deux boutons de hauteurs differentes. La grille
   passe a deux colonnes seulement quand la place existe (voir plus bas). */
.procure__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.procure__cta .btn {
  justify-content: center;
  text-align: center;
}

.btn--sm {
  padding: 11px 16px;
  font-size: 0.88rem;
}

/* --- Sprungverzeichnis -------------------------------------------------- */

/* Anker zielen unter der sticky Kopfzeile (68px) landen. */
section[id] {
  scroll-margin-top: 86px;
}

.quick-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  max-width: 860px;
}

.quick-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.92rem;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.quick-index a:hover {
  border-color: var(--color-graphite);
  transform: translateY(-1px);
}

.quick-index__sku {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--color-steel);
  font-weight: 600;
  flex: none;
}

/* --- Catalogue : cartes produit en tête de fiche ------------------------- */

.catalogue__intro {
  max-width: var(--max-read-width);
  margin: 0 0 26px;
  color: var(--color-ink);
}

.pcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.pcard {
  display: flex;
}

.pcard__link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease, border-color 0.3s ease;
}

.pcard__link:hover,
.pcard__link:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(138, 123, 168, 0.55);
  box-shadow: var(--shadow-card-lg), var(--shadow-glow);
}

.pcard__link:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 3px;
}

.pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    radial-gradient(78% 78% at 50% 34%, rgba(138, 123, 168, 0.16) 0%, rgba(138, 123, 168, 0) 68%),
    linear-gradient(168deg, #f8f5f1 0%, #efeae4 55%, #e7e1da 100%);
}

.pcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 12%;
  object-fit: contain;
  transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pcard__link:hover .pcard__media img,
.pcard__link:focus-visible .pcard__media img {
  transform: scale(1.07) rotate(-1.2deg);
}

.pcard__badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(30, 30, 36, 0.82);
  color: var(--color-moon);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 18px 18px;
}

.pcard__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pcard__sku {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.pcard__kicker {
  padding: 2px 9px;
  border: 1px solid rgba(138, 123, 168, 0.35);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--color-signal);
}

.pcard__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-graphite);
}

.pcard__type {
  font-size: 0.82rem;
  color: var(--color-steel);
}

.pcard__facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
}

.pcard__facts li {
  padding: 3px 9px;
  border: 1px solid rgba(138, 123, 168, 0.2);
  border-radius: 6px;
  background: rgba(138, 123, 168, 0.09);
  color: #4a4360;
  font-size: 0.76rem;
}

.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--color-line);
}

.pcard__moq {
  font-size: 0.78rem;
  color: var(--color-steel);
}

.pcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-signal);
}

.pcard__arrow {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pcard__link:hover .pcard__arrow,
.pcard__link:focus-visible .pcard__arrow {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .pcard__link,
  .pcard__media img,
  .pcard__arrow {
    transition: none;
  }

  .pcard__link:hover,
  .pcard__link:focus-visible,
  .pcard__link:hover .pcard__media img,
  .pcard__link:focus-visible .pcard__media img,
  .pcard__link:hover .pcard__arrow,
  .pcard__link:focus-visible .pcard__arrow {
    transform: none;
  }
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
  max-width: 860px;
}

.faq details {
  border-bottom: 1px solid var(--color-line);
  padding: 20px 0;
}

.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--color-steel);
  font-size: 1.3rem;
  line-height: 1;
  flex: none;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  margin: 14px 0 0;
  max-width: 760px;
  color: #4a5057;
}

/* --- FAQ-Inquiry-CTA (pro Kategorie) ----------------------------------- */

.faq-cta {
  margin-top: 28px;
  background: var(--color-graphite);
  color: var(--color-moon);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.faq-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 130% at 88% 0%,
    rgba(138, 123, 168, 0.2) 0%,
    rgba(19, 22, 26, 0) 60%
  );
  pointer-events: none;
}

.faq-cta > div:first-child {
  position: relative;
}

.faq-cta h3 {
  color: var(--color-moon);
  margin: 0 0 0.25em;
  font-size: 1.16rem;
}

.faq-cta p {
  margin: 0;
  color: #b9bcc0;
  font-size: 0.95rem;
  max-width: 600px;
}

.faq-cta__actions {
  position: relative;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- Formular ----------------------------------------------------------- */

.form {
  display: grid;
  gap: 18px;
  max-width: 640px;
}

.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 7px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-graphite);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 38, 43, 0.08);
}

.field--check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.9rem;
}

.field--check input {
  width: auto;
  margin-top: 5px;
  flex: none;
}

.form__note {
  font-size: 0.85rem;
  color: var(--color-steel);
}

.form__status {
  border-radius: var(--radius);
  padding: 15px 18px;
  font-size: 0.94rem;
  display: none;
}

.form__status.is-visible {
  display: block;
}

.form__status--ok {
  background: #eef7f1;
  border: 1px solid #bfe0cc;
  color: #1a5c39;
}

.form__status--err {
  background: #fdf1ec;
  border: 1px solid #f0cdbd;
  color: #8a3b1c;
}

/* --- Kontaktwege -------------------------------------------------------- */

.contact-ways {
  display: grid;
  gap: 18px;
}

.contact-way {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 22px;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-way:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-lg);
}

.contact-way h3,
.contact-way h2 {
  margin-bottom: 0.3em;
  font-size: 1.06rem;
}

.contact-way p {
  margin-bottom: 0;
  font-size: 0.94rem;
  color: #4a5057;
}

.contact-way a {
  font-weight: 600;
}

/* --- Abschluss-CTA ------------------------------------------------------ */

.cta-final {
  text-align: center;
}

.cta-final h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
}

.cta-final .lede {
  max-width: 620px;
  margin-inline: auto;
}

.cta-final .hero__actions {
  justify-content: center;
  margin-top: 26px;
}

.cta-final--panel {
  background: var(--grad-graphite);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  color: var(--color-moon);
}

.cta-final--panel h2,
.cta-final--panel .lede {
  color: var(--color-moon);
}

.cta-final--panel .note {
  color: #9aa0a6;
}

.cta-final--panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 100% at 80% 0%,
    rgba(138, 123, 168, 0.2) 0%,
    rgba(19, 22, 26, 0) 60%
  );
  pointer-events: none;
}

/* --- Fußzeile ----------------------------------------------------------- */

.site-footer {
  background: var(--color-graphite-deep);
  color: #b9bcc0;
  padding-block: 72px 40px;
  font-size: 0.92rem;
}

.site-footer a {
  color: #cfd1d3;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-moon);
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.footer-grid h3 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin-bottom: 16px;
  font-weight: 600;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-moon);
  margin-bottom: 12px;
  display: block;
}

.footer-bottom {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--color-line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-size: 0.84rem;
  color: #8d9297;
}

.age-note {
  color: var(--color-signal);
}

/* --- Sticky-Kontaktleiste (mobil) --------------------------------------- */

.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--color-graphite-deep);
  border-top: 1px solid var(--color-line-dark);
  padding: 8px 16px;
  gap: 10px;
}

.mobile-bar .btn {
  flex: 1;
  padding: 11px 12px;
  font-size: 0.88rem;
}

/* --- 404 ---------------------------------------------------------------- */

.notfound {
  text-align: center;
  padding-block: 130px;
}

/* --- Tabellen / Utility ------------------------------------------------- */

/* ==========================================================================
   R60 — Tableaux : dire qu'il y a une suite à droite.
   --------------------------------------------------------------------------
   Mesuré à 390 px avant correction : un tableau à trois colonnes — la forme
   la plus fréquente du site, 118 occurrences — débordait déjà de 20 % ; la
   troisième colonne n'apparaissait qu'en défilant, et rien ne l'annonçait.
   Un conteneur qui défile sans indice se lit comme un tableau tronqué.

   Les ombres ci-dessous sont le motif « scroll shadows » en CSS pur : deux
   dégradés fixes sur les bords et deux dégradés « local » qui les recouvrent
   dès que le défilement atteint le bord. Aucun script, aucun attribut à
   maintenir, et l'ombre disparaît d'elle-même quand le tableau tient dans la
   boîte. Les couleurs reprennent `--color-paper`, le fond réel de la page.
   ========================================================================== */
/* R61 — le dégradé de bord n'est plus peint ici.
   La recette classique — deux `local` de la couleur du fond, deux `scroll`
   en `radial-gradient` — ne rendait rien sur ce site : le `local` de droite,
   positionné sur le bord droit tant qu'on n'a pas défilé, recouvrait
   précisément les quinze pixels où l'ombre aurait dû apparaître. Mesuré à
   l'écran, puis remplacé par un masque piloté en JS (`main.js`), qui agit sur
   le contenu rendu et ne peut donc pas être recouvert. Voir plus bas le bloc
   « bords défilants ». */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* --- Bords défilants (R61) ------------------------------------------------

   Un conteneur qui défile sans indice visuel se lit comme un contenu
   tronqué : le lecteur ne devine pas qu'il y a une suite à droite, et
   referme. La recette classique — deux dégradés `local` de la couleur du
   fond sur les bords, deux ombres `scroll` dessous — ne rendait rien ici :
   le dégradé `local` de droite, posé sur le bord tant qu'on n'a pas défilé,
   recouvre exactement les quinze pixels où l'ombre devrait apparaître.

   On pose donc un masque, piloté par main.js, qui seul connaît la position
   de défilement. Un masque agit sur le contenu rendu, il ne peut pas être
   recouvert par lui. Trois états : au début (dégradé à droite), au bout
   (dégradé à gauche), au milieu (les deux). 26 px de large — assez pour se
   voir, assez peu pour ne pas manger une étiquette en fin de course.

   Les deux conteneurs sont traités ensemble : les 176 tableaux d'articles et
   les 189 figures SVG posent le même problème et méritent la même réponse. */

.chart-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

:is(.chart-scroll, .table-scroll).is-scrollable.at-start:not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}

:is(.chart-scroll, .table-scroll).is-scrollable.at-end:not(.at-start) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26px);
  mask-image: linear-gradient(to right, transparent, #000 26px);
}

:is(.chart-scroll, .table-scroll).is-scrollable:not(.at-start):not(.at-end) {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 26px,
    #000 calc(100% - 26px),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 26px,
    #000 calc(100% - 26px),
    transparent
  );
}



/* Légende de tableau réservée aux lecteurs d'écran : le titre de section
   juste au-dessus joue déjà ce rôle à l'écran. */
.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;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 560px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--color-line);
}

.data-table th {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-steel);
  font-weight: 600;
}

/* ==========================================================================
   R61 — Tableau de comparaison des neuf références (/produit/).

   Les cartes du catalogue montrent chaque référence une par une ; elles ne
   répondent pas à la question qu'un distributeur pose en premier, qui est
   comparative : « entre A0158 et A0170, qu'est-ce qui change ? ». Neuf
   lignes sur neuf colonnes constantes répondent en un regard.

   La largeur minimale dépasse celle de `.data-table` : neuf colonnes dans
   560 px donneraient des en-têtes coupés en deux. Sur écran étroit le
   tableau défile, comme les 176 tableaux d'articles.
   ========================================================================== */

.sku-compare {
  margin: 3rem 0 0;
  padding-top: 2.4rem;
  border-top: 1px solid var(--color-line);
}

.sku-compare h2 {
  margin-bottom: 0.8rem;
}

.sku-table {
  min-width: 880px;
  margin-top: 0.4rem;
}

/* La première colonne est un `<th scope="row">` : elle hérite du style des
   en-têtes de colonne, en capitales et très espacé, ce qui déforme les
   références : A0158, étiré et passé en capitales, ne se lit plus comme une
   référence. */
.sku-table tbody th {
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--color-graphite);
  white-space: nowrap;
}

.sku-table tbody th a {
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
}

.sku-table tbody th a:hover {
  color: var(--color-signal);
  border-bottom-color: currentColor;
}

.sku-table tbody td {
  font-size: 0.88rem;
  vertical-align: top;
}

.sku-table tbody tr:hover td,
.sku-table tbody tr:hover th {
  background: #f6f4ee;
}

/* La référence de norme sous l'indice d'étanchéité : « IPX5 » seul ne dit
   pas selon quel texte il a été vérifié, et c'est justement la question. */
.sku-table__ref {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #63686f;
  margin-top: 2px;
}

.mt-0 {
  margin-top: 0;
}
.mt-2 {
  margin-top: 2rem;
}
.mb-0 {
  margin-bottom: 0;
}

/* R59 — la note de bas de bloc, mesurée sur les vingt pages qui l'emploient.
   Deux défauts, tous deux invisibles à l'œil :
   — sur /technologie/, la note du bloc « documents » courait sur les
     1 192 px du conteneur, soit 168 caractères par ligne (confort : 60-85) ;
   — sa couleur `--color-steel` (#8a8f98) sur le papier (#faf8f3) plafonne à
     3,06:1, sous le seuil AA de 4,5:1 pour du texte de 14 px.
   Le gris retenu (#63686f) donne 5,29:1 sur le même fond sans changer de
   famille de ton, et 62ch ramène la ligne autour de 82 caractères. La bande
   graphite garde sa propre teinte, plus claire, définie plus bas. */
.note {
  font-size: 0.88rem;
  color: #63686f;
  max-width: 62ch;
}

/* Note de bas de bloc : sans mesure, elle traversait les 1240 px du wrap
   et se lisait à plus de 130 caractères par ligne. */
.note--catalogue {
  max-width: 62ch;
}

/* --- Scroll-Reveal ------------------------------------------------------ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Responsiv ---------------------------------------------------------- */

@media (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .market__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .hero__grid,
  .product__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .moon-wrap {
    order: -1;
    justify-content: flex-start;
  }
  .moon {
    width: 130px;
  }

  .site-nav {
    display: none;
    width: 100%;
    order: 3;
    padding-bottom: 14px;
  }
  .site-nav.is-open {
    display: block;
  }
  .site-nav ul {
    flex-direction: column;
    gap: 2px;
  }
  .site-nav a {
    display: block;
    padding: 9px 0;
    border-top: 1px solid var(--color-line-dark);
  }
  .nav-toggle {
    display: inline-block;
  }
  .site-header__inner {
    flex-wrap: wrap;
    padding-block: 12px;
  }
  .header-cta {
    display: none;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3,
  .grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .product__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mobile-bar {
    display: flex;
    height: 56px;
  }
  body {
    padding-bottom: 56px;
  }
  .section {
    padding-block: var(--space-section-sm);
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .market__figures {
    grid-template-columns: minmax(0, 1fr);
  }
  .card {
    padding: 24px;
  }
  .trustbar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .pcards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .product__gallery {
    gap: 8px;
  }
  .shot__btn img {
    padding: 7%;
  }
  .product__gallery-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* Mobile-Navigation: deutlicher Hover/Fokus-Kontrast */
@media (max-width: 860px) {
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"] {
    color: var(--color-signal-bright);
    background: rgba(138, 123, 168, 0.08);
    padding-left: 10px;
  }
  .site-nav a {
    transition: color 0.16s ease, background-color 0.16s ease, padding-left 0.16s ease;
  }
}

/* --- Rechtliche Seiten (Impressum, Datenschutz, AGB, Cookies, Urheber) -- */

.page-legal .page-head h1 {
  margin-bottom: 0.3em;
}

.legal {
  max-width: 820px;
}

.legal h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-top: 1.9em;
  padding-top: 0.7em;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: 90px;
}

.legal h2:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.legal h3 {
  font-size: 1.12rem;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}

.legal p,
.legal li {
  color: #3f4449;
}

.legal ul {
  padding-left: 1.25em;
  margin: 0 0 1.2em;
}

.legal li {
  margin-bottom: 0.45em;
}

.legal a {
  color: var(--color-graphite);
  font-weight: 500;
}

.legal a:hover {
  color: var(--color-signal);
}

.legal__meta {
  font-size: 0.84rem;
  color: var(--color-steel);
  margin-top: 2.2em;
}

.legal__toc {
  list-style: none;
  margin: 0 0 2em;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 8px;
}

.legal__toc a {
  text-decoration: none;
  font-weight: 500;
}

.legal__toc a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Visionneuse d'images (zoom) ---------------------------------------- */

.zoomable {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;            /* ueber Header (50) und mobile-bar (60) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 58px 20px 22px;
  background: rgba(16, 18, 21, 0.965);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(90vw, 940px);
  height: min(62vh, 720px);
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(70% 70% at 50% 38%, #ffffff 0%, #f4f1ec 62%, #e9e3dc 100%);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.62);
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  padding: 3%;
  opacity: 1;
  transition: opacity 0.22s ease;
}

/* Pendant le chargement de la vue suivante : l'ancienne s'efface, la
   nouvelle arrive sans faire sauter la mise en page. */
.lightbox__img.is-loading {
  opacity: 0.22;
}

.lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-line-dark);
  border-radius: 50%;
  background: rgba(34, 38, 43, 0.85);
  color: var(--color-moon);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.lightbox__btn:hover,
.lightbox__btn:focus-visible {
  background: var(--color-signal);
  color: var(--color-graphite-deep);
  transform: scale(1.06);
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 18px;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: 12px;
}

.lightbox__nav--next {
  right: 12px;
}

.lightbox__count {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border: 1px solid var(--color-line-dark);
  border-radius: 999px;
  background: rgba(34, 38, 43, 0.85);
  color: var(--color-moon);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.lightbox__thumbs {
  display: flex;
  gap: 8px;
  max-width: min(92vw, 700px);
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--color-line-dark);
  border-radius: 12px;
  background: rgba(34, 38, 43, 0.72);
  scrollbar-width: thin;
}

.lightbox__thumb {
  flex: none;
  width: 56px;
  height: 56px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: linear-gradient(168deg, #f8f5f1 0%, #ece7e1 100%);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lightbox__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox__thumb:hover,
.lightbox__thumb:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

.lightbox__thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--color-signal-bright);
}

.lightbox__caption {
  max-width: min(92vw, 700px);
  text-align: center;
  color: var(--color-moon);
  font-size: 0.88rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__img,
  .lightbox__btn,
  .lightbox__thumb {
    transition: none;
  }

  .lightbox__btn:hover,
  .lightbox__btn:focus-visible,
  .lightbox__thumb:hover,
  .lightbox__thumb:focus-visible {
    transform: none;
  }
}

@media (max-width: 720px) {
  .lightbox {
    gap: 10px;
    padding: 52px 12px 16px;
  }

  .lightbox__stage {
    width: 94vw;
    height: min(54vh, 520px);
  }

  .lightbox__btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .lightbox__nav--prev {
    left: 6px;
  }

  .lightbox__nav--next {
    right: 6px;
  }

  .lightbox__thumb {
    width: 46px;
    height: 46px;
  }
}

/* Headernavigation auf eigene Compositor-Ebene heben, damit das
   backdrop-filter beim Scrollen nicht bei jedem Frame neu rastert. */
.site-header {
  transform: translateZ(0);
  will-change: transform;
}

/* Dekorative Animationen pausieren, wenn die Seite im Hintergrund ist. */
html.anim-paused *,
html.anim-paused *::before,
html.anim-paused *::after {
  animation-play-state: paused !important;
}

/* Pas de `content-visibility: auto` sur .product : les sections hors ecran
   seraient mesurees sur une hauteur estimee, et l'ancrage des cartes
   (#slug) tomberait a cote de la fiche (derive de ~120 px mesuree en CDP,
   non corrigee ensuite par le navigateur). Les images restent en
   `loading="lazy"`, le cout de rendu des 9 fiches est negligeable. */

/* GEO-Autoritätsnachweise: externe Fachquellen (EUR-Lex, Marktstudien).
   Schlanke, sichtbare Quellenliste am Seitenende — ein Zitat-Signal für
   generierende Suchmaschinen (GEO) ohne Verlinkung von Schwester-Marken. */
.sources {
  margin-top: 2rem;
  border: 1px solid var(--color-line, #2a2f45);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  background: var(--color-surface, #14172a);
}
.sources__title {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted, #8b90a8);
  margin: 0 0 0.6rem;
}
.sources__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.sources__list li {
  font-size: 0.92rem;
  line-height: 1.45;
}
.sources__list a {
  color: var(--color-moon, #cdd6ff);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sources__list a:hover { color: #fff; }
.sources__note {
  font-size: 0.78rem;
  color: var(--color-muted, #8b90a8);
  margin: 0.7rem 0 0;
}

/* Emplacement de donnees a confirmer par le client — encadre jaune visible */
.todo { display:inline-block; border:1.5px dashed #b8860b; background:#fffbe6; color:#7a5c00; border-radius:var(--radius); padding:2px 10px; font-size:0.85em; font-weight:600; }

/* ==========================================================================
   Blog — journal B2B. Couverture = titre typographique (aucune image).
   ========================================================================== */

/* --- Index /blog/ ------------------------------------------------------- */
.page-blog .page-head--blog {
  background: var(--grad-graphite);
  color: var(--color-moon);
  padding: clamp(3rem, 7vw, 6rem) 0;
}
.page-blog .page-head--blog .eyebrow { color: var(--color-signal-bright); }
.page-blog .page-head--blog .lede { color: var(--color-moon-dim); }

.post-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.post-card:hover {
  box-shadow: var(--shadow-card-lg);
  transform: translateY(-2px);
}
.post-card__meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.post-card__date {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--color-steel);
  text-transform: uppercase;
}
.post-card__cluster {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-signal);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
}
.post-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.55rem;
}
.post-card__title a {
  color: var(--color-ink);
  text-decoration: none;
}
.post-card__title a:hover { color: var(--color-signal); }
.post-card__excerpt {
  color: var(--color-steel);
  line-height: 1.65;
  margin: 0 0 0.85rem;
}
.post-card__link {
  font-weight: 600;
  color: var(--color-signal);
  text-decoration: none;
}
.post-card__link:hover { text-decoration: underline; text-underline-offset: 2px; }

.blog-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-steel);
}
.blog-empty h2 { color: var(--color-ink); }
.blog-empty a { color: var(--color-signal); }

/* --- Article /blog/<slug>/ ---------------------------------------------- */
.post__cover {
  background: var(--grad-graphite);
  color: var(--color-moon);
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--color-line-dark);
}
.post__eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-signal-bright);
  margin: 0 0 1rem;
}
.post__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
  margin: 0;
  max-width: 18ch;
}
.post__meta {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--color-moon-dim);
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.post__body {
  max-width: var(--max-read-width);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 1.25rem 4rem;
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-ink);
}
.post__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.2;
  margin: 2.4em 0 0.7em;
  color: var(--color-ink);
}
.post__body h3 {
  font-size: 1.2rem;
  font-weight: 650;
  margin: 2em 0 0.6em;
}
.post__body p { margin: 0 0 1.15em; }
.post__body ul,
.post__body ol {
  margin: 0 0 1.3em;
  padding-left: 1.4rem;
}
.post__body li { margin-bottom: 0.45em; }
.post__body strong { font-weight: 650; }
.post__body a { color: var(--color-signal); }
.post__body blockquote {
  margin: 1.6em 0;
  padding: 0.4em 1.2em;
  border-left: 3px solid var(--color-signal);
  color: var(--color-steel);
  font-style: italic;
}
.post__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.95rem;
}
.post__body th,
.post__body td {
  border: 1px solid var(--color-line);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.post__body th {
  background: var(--color-graphite);
  color: var(--color-moon);
  font-weight: 600;
}
.post__body tr:nth-child(even) td { background: #f6f4ee; }

/* Écran étroit : deux réglages font tenir trois colonnes dans 322 px — une
   police à 0,82 rem et des marges internes de 0,4 rem.
   Ce bloc est placé APRÈS `.post__body table` : à spécificité égale la
   dernière règle gagne. La première version, écrite plus haut dans la
   feuille, était écrasée — la police mesurée restait à 15,2 px. */
@media (max-width: 640px) {
  .post__body table {
    font-size: 0.82rem;
  }

  .post__body th,
  .post__body td {
    padding: 0.4rem 0.42rem;
    hyphens: auto;
    /* `break-word` et non `anywhere` : mesuré à l'écran, `anywhere` coupait
       « Porosité » en « Por / osit / é » et « Excellente » en « Excell /
       ente » dès qu'une colonne descendait sous 70 px. Mieux vaut un
       tableau qui défile qu'un tableau illisible. */
    overflow-wrap: break-word;
  }

  .post__body th {
    font-size: 0.78rem;
  }

  /* À partir de quatre colonnes, 322 px ne suffisent plus : on assume le
     défilement, mais avec une largeur minimale qui garde chaque colonne
     lisible — et l'ombre de `.table-scroll` indique qu'il y a une suite. */
  .post__body .table-scroll:has(thead th:nth-child(4)) table {
    min-width: 420px;
  }
}


/* ==========================================================================
   R61 — Figures SVG : largeur minimale de lecture.

   Chaque figure reçoit au build `--chart-w`, la largeur à laquelle son plus
   petit texte atteint 10 px (voir adaptCharts dans content.ts). Un SVG dont
   les étiquettes sont en coordonnées absolues ne peut pas être « agrandi »
   sans que tout se chevauche : il faut agrandir la figure et laisser le
   conteneur défiler.

   Le seuil est 1160 px, pas 640. La colonne de lecture ne dépend pas
   linéairement de la fenêtre : entre 900 et 1100 px la barre latérale est
   présente et la colonne reste à 640 px, ce qui ramène un texte de 9 px à
   8,5 px ; elle ne repasse au-dessus de 740 px qu'à partir de 1200 px de
   fenêtre. Couper à 640 n'aurait donc réglé que le téléphone. Mesuré avec
   scripts/measure-charts.mjs aux largeurs 390, 640, 720, 760, 900, 1024,
   1100, 1200, 1366 et 1440.
   ========================================================================== */
@media (max-width: 1160px) {
  /* `min-width` et non `width` : si la figure demande moins que la colonne,
     elle garde la colonne entière et son texte grossit d'autant. */
  .post__chart .chart-scroll > svg {
    width: 100%;
    min-width: var(--chart-w, 0);
    max-width: none;
  }
}


/* --- Sommaire d'article ------------------------------------------------ */
.post__toc {
  margin: 0 0 2.6rem;
  padding: 1.3rem 1.5rem 1.4rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md, 12px);
  background: #fbfaf6;
}
.post__toc h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin: 0 0 0.7rem;
}
.post__toc-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.98rem;
  line-height: 1.55;
}
.post__toc-list li { margin-bottom: 0.35rem; }
.post__toc-list a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.post__toc-list a:hover,
.post__toc-list a:focus-visible {
  border-bottom-color: var(--color-signal);
}
.post__body h2[id] { scroll-margin-top: 6rem; }

/* --- Encadré de données (GEO) ----------------------------------------- */
.post__data-note {
  margin: 0 0 1.4em;
  font-size: 0.95rem;
  color: var(--color-steel);
}
.post__chart {
  margin: 1.8em 0 2em;
}
.post__chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.post__chart figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--color-steel);
}

.post__cta {
  margin: 3rem 0 2rem;
  background: var(--grad-graphite);
  color: var(--color-moon);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem;
}
.post__cta h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 0.6rem;
  color: var(--color-moon);
}
.post__cta p { color: var(--color-moon-dim); margin: 0 0 1.2rem; }
.post__cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.post__back {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}
.post__back a {
  font-weight: 600;
  color: var(--color-signal);
  text-decoration: none;
}
.post__back a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* --- Maillage interne ---------------------------------------------------
   Articles liés / Pour aller plus loin (pied d'article) et Guides
   associés (pied de page du site). Ancres descriptives, listes courtes —
   trois liens maximum par bloc, conformément aux recommandations de
   Google sur les liens internes contextuels. */
.post__related,
.post__core-links {
  margin: 2.5rem 0 0;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.post__related h2,
.post__core-links h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 0.9rem;
  color: var(--color-ink);
}
.post__related ul,
.post__core-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.post__related li,
.post__core-links li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-line);
}
.post__related li:last-child,
.post__core-links li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.post__related a,
.post__core-links a {
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
.post__related a:hover,
.post__core-links a:hover { color: var(--color-signal); }
.post__related-cluster {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-signal);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  white-space: nowrap;
}

/* Guides associés (pages du site) */
.blog-links {
  border-top: 1px solid var(--color-line);
}
.blog-links h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  margin: 0 0 1.1rem;
  color: var(--color-ink);
}
.blog-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.blog-links__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.blog-links__list a {
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
.blog-links__list a:hover { color: var(--color-signal); }
.blog-links__cluster {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-signal);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  white-space: nowrap;
}

/* Pages liées (maillage interne entre pages du site) */
.page-links {
  border-top: 1px solid var(--color-line);
}
.page-links h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  margin: 0 0 1.1rem;
  color: var(--color-ink);
}
.page-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.page-links__list li {
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.page-links__list a {
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
.page-links__list a:hover { color: var(--color-signal); }

/* ==========================================================================
   R39 — Lecture immersive & confort de lecture (amélioration progressive).
   Tout dégrade proprement : text-wrap, hyphens et la barre de progression
   ne s'activent que si le navigateur / le JS le permettent.
   ========================================================================== */

/* Barre de progression de lecture : fixe, au-dessus de l'en-tête collant. */
.read-progress {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--color-signal), var(--color-signal-bright));
  z-index: 60;
  opacity: 0;
  transition: width 0.1s linear, opacity 0.2s ease;
  pointer-events: none;
}
.js .read-progress { display: block; }

@media (prefers-reduced-motion: reduce) {
  .read-progress { transition: none; }
}

/* Titres équilibrés + paragraphes soignés (progressive enhancement). */
.post__title,
.page-head h1,
.post__body h2,
.section h2,
.faq h2 {
  text-wrap: balance;
}
.post__body p,
.prose p,
.answer p,
.note,
.manifest p {
  text-wrap: pretty;
}

/* Césure française sur le corps long (lang="fr" hérité du document). */
.post__body,
.prose,
.answer {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Paragraphe d'introduction + lettrine sur les articles (immersion). */
.post__body > p:first-of-type {
  font-size: 1.22rem;
  line-height: 1.68;
  color: #37373d;
}
.post__body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 0.8;
  padding: 0.04em 0.12em 0 0;
  color: var(--color-signal);
}

/* Surbrillance de sélection aux couleurs de la marque. */
::selection {
  background: var(--color-signal);
  color: #fff;
}

/* Navigation rapide collante de la FAQ (sommaire persistant au défilement). */
.faq-sticky {
  position: sticky;
  top: 72px;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0.55rem 0.7rem;
  margin: 0 0 1.6rem;
}
.faq-sticky ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.faq-sticky a {
  display: inline-block;
  padding: 0.38rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.faq-sticky a:hover,
.faq-sticky a:focus-visible {
  border-color: var(--color-signal);
  color: var(--color-signal);
  background: #faf8f3;
}

/* Marge de défilement : ne pas masquer les titres sous l'en-tête collant
   ni sous la navigation rapide collante de la FAQ. */
.section[id] { scroll-margin-top: 5.5rem; }
.page-faq .section[id] { scroll-margin-top: 8.5rem; }

/* Rythme de lecture aéré sur les pages longues. */
.prose p { margin: 0 0 1.15em; }
.answer p { line-height: 1.8; }

/* ==========================================================================
   R40 — Optimisation mobile (lecture immersive sur appareils mobiles).
   Cible les petits écrans (≤560px) et les tablettes / mobiles larges (≤720px).
   Tout est dégradé proprement : les améliorations tactiles et le bandeau
   FAQ défilable n'altèrent pas le rendu desktop.
   ========================================================================== */

@media (max-width: 720px) {
  /* Navigation rapide FAQ : bandeau horizontal défilable (ressenti
     applicatif), moins haut que la version empilée et toujours au pouce. */
  .faq-sticky {
    top: 72px;
    padding: 0.45rem 0.5rem;
  }
  .faq-sticky ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.35rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .faq-sticky ul::-webkit-scrollbar { display: none; }
  .faq-sticky a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.42rem 0.85rem;
  }
  .page-faq .section[id] { scroll-margin-top: 8.5rem; }
}

@media (max-width: 560px) {
  .wrap { padding-inline: 18px; }

  /* Colonne de lecture confortable : taille et interligne ajustées pour
     le pouce, césure française préservée. */
  .post__body {
    padding: 1.8rem 1rem 3rem;
    font-size: 1.0625rem;
    line-height: 1.75;
  }
  .post__body h2 { font-size: 1.45rem; margin: 2em 0 0.6em; }
  .post__body h3 { font-size: 1.12rem; }
  .post__body > p:first-of-type { font-size: 1.1rem; line-height: 1.65; }
  .post__body > p:first-of-type::first-letter {
    font-size: clamp(2.2rem, 12vw, 3.2rem);
    line-height: 0.78;
  }

  /* Sommaire : compact et entièrement tactile. */
  .post__toc { padding: 1.1rem 1.15rem 1.2rem; margin-bottom: 2rem; }
  .post__toc-list { font-size: 0.95rem; }
  .post__toc-list a {
    display: block;
    padding: 0.32rem 0.2rem;
    border-radius: 6px;
  }

  /* Graphiques SVG : pleine largeur sur écran moyen ; la largeur minimale
     n'entre en jeu qu'en dessous de 640 px (voir plus haut). */
  .post__chart { margin: 1.4em 0 1.6em; }

  /* Cibles tactiles généreuses (≥44px) sur les maillages internes. */
  .page-links__list a,
  .blog-links__list a {
    display: block;
    padding: 0.85rem 0.2rem;
    min-height: 44px;
    overflow-wrap: anywhere;
  }

  /* CTA empilés, pleine largeur, à portée du pouce. */
  .post__cta { padding: 1.5rem 1.25rem; }
  .post__cta-actions .btn { flex: 1 1 100%; }
  .faq-cta { padding: 20px 18px; }
  .faq-cta__actions { width: 100%; }
  .faq-cta__actions .btn { flex: 1 1 100%; }

  /* En-tête compact sur petits écrans. */
  .brand { font-size: 1.08rem; }
  .nav-toggle { padding: 7px 10px; font-size: 0.85rem; }
  .site-header__inner { gap: 12px; }

  /* Cartes de lien internes plus serrées. */
  .page-links__list li,
  .blog-links__list li { padding: 0.85rem 1rem; }
  .page-links h2,
  .blog-links h2 { font-size: 1.4rem; }

  /* Finitions mobiles : pas de flash tactile gris, césure de sécurité. */
  a, button, .nav-toggle { -webkit-tap-highlight-color: transparent; }
  .post__body, .prose, .answer { overflow-wrap: break-word; }
}

/* ==========================================================================
   R41 — Squelette de maillage & bureau.
   1. En-tête de section avec action alignée (accueil : gamme).
   2. Vitrine produit de l'accueil, plus compacte que la galerie catalogue.
   3. Blocs de liens internes en deux colonnes sur bureau : six destinations
      tiennent sur trois lignes au lieu de six, la page reste lisible.
   4. Note de continuité « Pour aller plus loin » dans la FAQ.
   ========================================================================== */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 0.6rem;
}

.section-head h2 { margin-bottom: 0; }

.pcards--home { gap: 18px; }

.pcards--home .pcard__media { aspect-ratio: 4 / 3; }
.pcards--home .pcard__media img { padding: 9%; }

.pcards--home .pcard__body { padding: 16px 16px 18px; }

.pcards--home .pcard__name { font-size: 1rem; }

/* Blocs de liens : deux colonnes dès 760 px. La cible tactile reste
   confortable, la lecture se fait par balayage horizontal. */
@media (min-width: 760px) {
  .page-links__list,
  .blog-links__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
}

/* Note de continuité en fin de section FAQ : un filet discret sépare la
   liste de questions du rebond vers la page commerciale. */
.faq-more {
  margin: 1.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.95rem;
  color: var(--color-steel);
}

.faq-more a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: rgba(138, 123, 168, 0.55);
  text-underline-offset: 0.18em;
}

.faq-more a:hover { color: var(--color-signal); }

/* ==========================================================================
   R60 — Accueil : trois rubriques de questions côte à côte.
   --------------------------------------------------------------------------
   Le bloc précédent empilait six questions d'une seule rubrique sur 860 px
   de large. Trois colonnes de deux questions montrent d'un coup d'œil que
   la base couvre la matière, la conformité et la logistique — trois des six
   rubriques — et chaque colonne renvoie à sa sous-page. En dessous de
   1080 px, les colonnes se replient : deux questions par bloc restent
   lisibles sans étiquette de rubrique collée au mauvais groupe.
   ========================================================================== */
.faq-themes {
  display: grid;
  gap: 1.9rem;
}

.faq-theme__label {
  margin: 0 0 0.2rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.faq-theme__label a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.faq-theme__label a:hover,
.faq-theme__label a:focus-visible {
  color: var(--color-signal);
  border-bottom-color: var(--color-signal);
}

/* Le bloc de l'accueil garde le filet de chaque question mais perd la
   marge haute du premier item : l'étiquette de rubrique sert de séparateur.
   `display: block` neutralise la grille à deux colonnes que `.faq` reçoit
   au-delà de 1180 px (R49) — sans elle, chaque rubrique affichait ses deux
   questions côte à côte dans une colonne de 300 px. */
.faq-theme .faq {
  max-width: none;
  display: block;
}

.faq-theme .faq details:first-of-type {
  border-top: 1px solid var(--color-line);
}

@media (min-width: 1080px) {
  .faq-themes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.6rem, 3vw, 3rem);
  }

  .faq-theme .faq summary {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   R41 — Sommaire d'article en colonne latérale collante (bureau).

   Sur un écran de bureau, un sommaire en tête d'article disparaît dès la
   première section lue : le lecteur perd le fil et revient en haut de page.
   À partir de 1140 px, le sommaire passe donc dans une colonne de 232 px
   qui suit la lecture. En dessous, la mise en page reste identique à avant
   (sommaire en tête, pleine largeur) : aucune régression sur tablette.
   -------------------------------------------------------------------------- */
.post__layout { display: block; }

@media (min-width: 1140px) {
  .post__layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.8rem, 3vw, 3rem);
    max-width: 1010px;
    margin: 0 auto;
    padding-top: clamp(2.5rem, 6vw, 4rem);
  }

  .post__aside {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.2rem;
  }

  .post__aside .post__toc {
    margin: 0;
    padding: 1.1rem 1.2rem 1.25rem;
  }

  .post__aside .post__toc h2 {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-steel);
    margin: 0 0 0.7rem;
    font-family: inherit;
  }

  .post__aside .post__toc-list {
    font-size: 0.9rem;
    line-height: 1.45;
    padding-left: 1rem;
  }

  .post__aside .post__toc-list li { margin-bottom: 0.4rem; }

  /* La colonne de lecture ne centre plus : elle occupe sa colonne. */
  .post__layout .post__body {
    max-width: none;
    margin: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
}


/* ==========================================================================
   R42 — Index du blog par dossiers.

   Le journal comptait une seule liste plate : à quatre articles cela
   passait, à cent cinquante le lecteur ne sait plus où commencer. Les
   huit dossiers deviennent huit sections ancrées sur /blog/, avec un
   sommaire de dossiers en tête. Aucune page nouvelle : les ancres sont
   stables (#dossier-c1…) et peuvent être liées depuis les articles.

   1. Bandeau de dossiers (pills + compteur).
   2. Section de dossier : titre, chapeau, grille de cartes.
   3. Repère de retour au sommaire des dossiers.
   ========================================================================== */

.page-head__count {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  color: var(--color-steel);
  letter-spacing: 0.01em;
}

.blog-clusters {
  margin: 0 0 clamp(2rem, 4vw, 3.2rem);
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  scroll-margin-top: 5.5rem;
}

.blog-clusters__title {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.blog-clusters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-clusters__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--color-ink);
  text-decoration: none;
  min-height: 40px;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.blog-clusters__list a:hover {
  border-color: var(--color-signal);
  color: var(--color-signal);
}

.blog-clusters__count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-steel);
  background: rgba(0, 0, 0, 0.045);
  border-radius: 999px;
  padding: 0.05rem 0.42rem;
}

.blog-group {
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--color-line);
  scroll-margin-top: 5.5rem;
}

.blog-group:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.blog-group__head {
  max-width: 62ch;
  margin-bottom: 1.4rem;
}

.blog-group__title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.4rem;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

.blog-group__count {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-steel);
  letter-spacing: 0.02em;
}

.blog-group__intro {
  margin: 0;
  color: var(--color-steel);
  line-height: 1.6;
}

.blog-group__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}

@media (min-width: 900px) {
  .blog-group__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.blog-group__list .post-card {
  margin-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog-group__list .post-card__excerpt {
  flex: 1 1 auto;
}

.blog-group__back {
  margin: 1.1rem 0 0;
  text-align: right;
  font-size: 0.85rem;
}

.blog-group__back a {
  color: var(--color-steel);
  text-decoration: none;
}

.blog-group__back a:hover { color: var(--color-signal); }

/* ============================================================
   R44 — Accueil : la gamme visible dès le premier écran (bureau)
   ------------------------------------------------------------
   Le hero occupait toute la hauteur : un acheteur arrivé sur la
   page ne voyait aucun produit avant d'avoir défilé. Le bandeau
   ci-dessous remet quatre visuels et le compte de références dans
   le hero, sans repousser les boutons sous la ligne de flottaison.
   ============================================================ */

.hero__range {
  position: relative;
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(240, 237, 230, 0.14);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 24px;
}

.hero__range-label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-moon-dim);
}

.hero__range-label span {
  display: inline-block;
  margin-left: 0.5em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(240, 237, 230, 0.1);
  color: var(--color-moon);
  letter-spacing: 0.04em;
}

.hero__range-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero__range-item a {
  /* R52 : le bandeau ne montre plus une vignette de 46 px suivie d'un
     libellé, mais la référence elle-même. En colonne, l'image occupe la
     largeur de la carte : à neuf colonnes sur un écran de bureau, chaque
     visuel fait une centaine de pixels et se lit comme un produit, pas
     comme une puce. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  height: 100%;
  padding: 8px 8px 10px;
  border: 1px solid rgba(240, 237, 230, 0.16);
  border-radius: var(--radius);
  background: rgba(240, 237, 230, 0.04);
  text-decoration: none;
  color: var(--color-moon-dim);
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.hero__range-item a:hover,
.hero__range-item a:focus-visible {
  border-color: var(--color-signal-bright);
  background: rgba(240, 237, 230, 0.08);
  color: var(--color-moon);
}

.hero__range-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero__range-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
}

/* Les libellés du programme vont de « Slow Lune » à « stimulateur rabbit
   triple doigt » : sur deux lignes pour le second. La réserve de hauteur
   garde les cartes alignées en bas, quel que soit le nombre de lignes. */
.hero__range-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 2.9em;
}

.hero__range-name {
  font-size: 0.74rem;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero__range-sku {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(240, 237, 230, 0.52);
  font-variant-numeric: tabular-nums;
}

.hero__range-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--color-moon-dim);
  max-width: 78ch;
}

/* La note est sortie de `.hero__range` (R56) : elle est enfant direct de la
   grille du hero, où elle occupe toute la largeur sous les deux colonnes. */
.hero__foot {
  grid-column: 1 / -1;
  margin-top: 26px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 14px;
}

.hero__foot .hero__range-note {
  margin: 0;
}

.hero__range-note a {
  color: var(--color-moon);
  text-decoration: underline;
  text-decoration-color: rgba(240, 237, 230, 0.4);
  text-underline-offset: 3px;
}

.hero__range-note a:hover { text-decoration-color: var(--color-signal-bright); }

.hero__range-more {
  /* R56 : le lien quitte l'en-tête de la colonne produits pour le pied de
     hero. Il n'a donc plus d'emplacement de grille à forcer — il suit
     simplement la note dans un conteneur flex. */
  font-size: 0.8rem;
  color: var(--color-moon);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(240, 237, 230, 0.32);
  padding-bottom: 2px;
}

.hero__range-more:hover { border-bottom-color: var(--color-signal-bright); }

/* Sur un écran de bureau large, le hero respire moins : la gamme doit
   tenir dans la première hauteur visible.
   ------------------------------------------------------------------------
   R56 — la gamme passe de « bandeau sous le texte » à « colonne de droite ».
   Le bandeau mesurait 1 031 px de haut avant d'exister : sur un portable
   (1 440 × 900), aucune référence n'était visible sans défiler, alors que
   c'est exactement ce qu'un acheteur B2B vient vérifier en premier.

   Disposition sur deux rangées : le texte occupe les deux (il est plus
   long), la lune puis la gamme se partagent la colonne de droite. C'est
   `grid-template-areas` qui le dit, plutôt qu'un ordre d'auto-placement
   qu'une insertion ultérieure déréglerait sans prévenir. */
@media (min-width: 1100px) {
  .hero { padding-block: clamp(48px, 4.6vw, 72px); }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 404px);
    grid-template-areas:
      "intro moon"
      "intro range"
      "foot  foot";
    grid-template-rows: auto 1fr auto;
    align-items: start;
    gap: 0 52px;
  }

  .hero__intro { grid-area: intro; }

  .moon-wrap {
    grid-area: moon;
    justify-content: flex-start;
    align-self: start;
  }

  .moon { width: 96px; }
  .moon-wrap::after { width: 126px; }

  /* Libellé sur sa propre ligne : à 404 px, « la gamme en un coup d'œil »,
     la pastille « 9 références » et le lien ne tenaient pas ensemble. */
  .hero__range {
    grid-area: range;
    align-self: start;
    display: block;
    margin-top: 20px;
  }

  .hero__range-label { margin-bottom: 10px; }

  .hero__foot {
    grid-area: foot;
    margin-top: 30px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px 40px;
  }

  .hero__foot .hero__range-note { max-width: 74ch; }

  /* Trois colonnes de 126 px : la vignette source fait 500 px, donc nette
     jusqu'en écran haute densité. Neuf colonnes obligeaient des vignettes
     de 106 px qui ne se lisaient pas comme des produits. */
  .hero__range-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__range-name { font-size: 0.72rem; }
  .hero__range-note { font-size: 0.72rem; }
}

@media (min-width: 640px) and (max-width: 1099px) {
  .hero__range-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Entre 861 et 1 099 px, le hero est encore sur deux colonnes (texte + lune)
   mais la gamme n'a pas la place d'être une troisième zone : elle reprend
   toute la largeur sous les deux. Sans cette règle, l'auto-placement la
   rangeait sous le texte seulement, laissant la colonne de la lune vide. */
@media (min-width: 861px) and (max-width: 1099px) {
  .hero__range { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  /* Le bandeau repasse en flux : en grille, le lien « voir les fiches »
     occupait une deuxième colonne implicite et la liste se retrouvait
     comprimée au tiers de la largeur. */
  .hero__range { display: block; }
  .hero__range-list { margin-top: 0.9rem; }
  .hero__range-note { font-size: 0.72rem; }
}

@media (max-width: 640px) {
  /* Neuf cartes empilées sur trois rangées repousseraient tout le reste de
     la page. On passe en bande défilante : deux cartes et demie visibles,
     le reste au glissement. La carte garde 163 px de large, assez pour un
     libellé sur deux lignes. */
  .hero__range-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .hero__range-list::-webkit-scrollbar { display: none; }
  .hero__range-item {
    flex: 0 0 42%;
    scroll-snap-align: start;
  }
  .hero__range-note { margin-top: 0.9rem; }
}

/* ==========================================================================
   R45 — Bureau : sommaire de FAQ, module « réponse + vocabulaire », TOC.
   --------------------------------------------------------------------------
   1. Le sommaire de /faq/ réutilisait la classe `.quick-index`, écrite pour
      la grille de produits : le titre prenait une colonne, la liste une
      autre, et les puces restaient visibles. Sur un écran de bureau, le
      sommaire de la page la plus longue du site tenait dans 180 px de large.
      Il a désormais ses propres classes : sept cartes, compteurs inclus.
   2. Le bloc de réponse courte s'arrêtait à 860 px dans un conteneur de
      1 240 px, laissant 380 px de vide à droite. La réponse et les
      pastilles de vocabulaire forment maintenant un module à deux colonnes.
   3. Le sommaire d'article ne coupe plus les mots : la césure, utile dans
      un paragraphe, produit des coupures illisibles dans une liste de titres.
   ========================================================================== */

.faq-index {
  border-top: 1px solid var(--color-line);
  padding-top: 1.4rem;
}

.faq-index__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 1rem;
  color: var(--color-ink);
}

.faq-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.faq-index__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.faq-index__list a:hover,
.faq-index__list a:focus-visible {
  border-color: var(--color-graphite);
  transform: translateY(-1px);
}

.faq-index__count {
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-paper);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-steel);
}

@media (min-width: 640px) {
  .faq-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .faq-index__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- R49 : cartes des six rubriques du hub FAQ -------------------------

   Le hub ne liste plus 296 réponses sur une seule URL. Il présente six
   rubriques, chacune avec son teaser et trois questions citées en aperçu :
   l'acheteur sait avant de cliquer si la rubrique contient sa réponse. Sur
   grand écran on passe à deux colonnes — la carte porte assez de texte pour
   qu'une colonne unique donne une lecture en « escalier » fatigante. */

.faq-hubs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.faq-hub {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.3rem 1.4rem 1.4rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.faq-hub h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
  color: var(--color-ink);
}

.faq-hub h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-line-dark);
}

.faq-hub h3 a:hover,
.faq-hub h3 a:focus-visible {
  color: var(--color-signal);
  border-bottom-color: var(--color-signal);
}

.faq-hub__count {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 2px 9px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-steel);
  vertical-align: 2px;
  white-space: nowrap;
}

.faq-hub__teaser {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: #4A4A52;
}

.faq-hub__samples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.faq-hub__samples li {
  font-size: 0.9rem;
  line-height: 1.5;
  padding-left: 1.05rem;
  position: relative;
}

.faq-hub__samples li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--color-signal);
}

.faq-hub__samples a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.faq-hub__samples a:hover,
.faq-hub__samples a:focus-visible {
  color: var(--color-signal);
  border-bottom-color: var(--color-signal);
}

/* Les liens de sortie sont poussés en bas de carte : les six rubriques
   n'ont pas le même nombre de lignes de teaser, et le bandeau du bas doit
   rester sur une seule ligne régulière. */
.faq-hub__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: auto 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.86rem;
}

.faq-hub__links a {
  color: var(--color-signal);
  text-decoration: none;
  font-weight: 600;
}

.faq-hub__links a:hover,
.faq-hub__links a:focus-visible {
  text-decoration: underline;
}

@media (min-width: 900px) {
  .faq-hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
  .faq-hubs { gap: 22px; }
  .faq-hub { padding: 1.5rem 1.7rem 1.6rem; }
}

/* Lien de retour vers le sommaire, en tête de chaque sous-page. Un fil
   d'Ariane seul ne suffit pas : le lecteur arrive souvent par une recherche
   directe sur la sous-page et cherche d'abord comment remonter. */
.faq-back {
  margin: 0;
  font-size: 0.9rem;
}

.faq-back a {
  color: var(--color-signal);
  text-decoration: none;
  font-weight: 600;
}

.faq-back a:hover,
.faq-back a:focus-visible {
  text-decoration: underline;
}

/* Bandeau « autres rubriques » en tête de sous-page.

   Une sous-page ne vit jamais seule : quelqu'un qui cherche son MOQ
   finit toujours par vouloir les délais d'expédition. Le bandeau rend
   les cinq autres rubriques visibles sans remonter au sommaire, et
   porte le compteur de chacune pour juger de l'intérêt avant le clic. */

.faq-siblings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 0.9rem;
}

.faq-siblings__label {
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin-right: 4px;
}

.faq-siblings a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.faq-siblings a:hover,
.faq-siblings a:focus-visible {
  border-color: var(--color-signal);
  color: var(--color-signal);
}

.faq-siblings a span {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-paper);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-steel);
}

/* --- Module réponse courte + vocabulaire d'achat ------------------------- */

.answer-module { display: grid; gap: 1.1rem; }

.answer-aside {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  padding: 1.1rem 1.15rem 1.2rem;
}

.answer-aside__label {
  margin: 0 0 0.75rem;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.answer-aside .pills { gap: 8px; }

.answer-aside .pill {
  padding: 6px 12px;
  font-size: 0.8rem;
  background: #fff;
}

@media (min-width: 1080px) {
  .answer-module {
    grid-template-columns: minmax(0, 1fr) 296px;
    align-items: start;
    gap: 2rem;
  }

  /* Les pastilles perdent un peu de volume : la colonne de droite doit
     rester proche de la hauteur du bloc de réponse, sinon le module
     laisse un vide sous le texte. */
  .answer-aside { padding: 1rem 1.05rem 1.05rem; }
  .answer-aside .pills { gap: 6px; }
  .answer-aside .pill { padding: 5px 10px; font-size: 0.76rem; }

  /* La colonne de gauche occupe la place laissée vide par l'ancienne
     largeur fixe : le texte gagne en confort, sans dépasser la largeur
     de lecture confortable. */
  .answer-module .answer { max-width: none; }
}

/* --- Sommaire d'article : pas de césure dans une liste de titres -------- */

.post__aside .post__toc,
.post__toc { hyphens: none; -webkit-hyphens: none; }

.post__aside .post__toc-list {
  line-height: 1.42;
}

.post__aside .post__toc-list a {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Le sommaire latéral peut compter dix-sept entrées : il défile alors dans
   sa colonne. Sans indice visuel, la dernière entrée paraissait tronquée par
   un défaut d'affichage plutôt que par une liste qui continue. */
@media (min-width: 1140px) {
  .post__aside {
    padding-bottom: 1.1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-line) transparent;
  }

  .post__aside::-webkit-scrollbar { width: 6px; }
  .post__aside::-webkit-scrollbar-thumb {
    background: var(--color-line);
    border-radius: 999px;
  }
}

/* ==========================================================================
   R46 — Lecture desktop : la FAQ occupe la largeur, le journal se lit
   par dossiers, et les pages longues rendent la main.

   1. FAQ sur deux colonnes (≥1180 px).
   2. Index du blog : chapeau de dossier collant + cartes à droite.
   3. Bandeau de certifications : plus de vignette orpheline.
   4. Cartes : lien d'action aligné en bas.
   5. Bouton « revenir en haut » sur les pages longues.
   ========================================================================== */

/* 1. Les blocs FAQ étaient plafonnés à 860 px dans un conteneur de 1240 px :
   la moitié droite restait vide et 296 questions s'empilaient sur près de
   dix écrans. Deux colonnes rendent la page moitié moins longue sans rien
   replier de plus — tout le texte reste affiché.

   R49 : les deux colonnes passent de `columns: 2` (flux multi-colonnes) à
   une grille. En flux multi-colonnes, l'ouverture d'une question
   rééquilibrait les colonnes et déplaçait toutes les questions suivantes
   d'une colonne à l'autre : le lecteur perdait la question qu'il venait
   d'ouvrir. En grille, chaque question reste à sa place ; l'ouverture
   n'allonge que sa propre ligne. */
@media (min-width: 1180px) {
  .faq {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 4vw, 4rem);
    row-gap: 0;
    align-items: start;
  }
}

/* 2. Index du blog. Chaque dossier devient une pleine page de journal :
   le chapeau (titre, nombre, chapeau, retour au sommaire) tient la colonne
   de gauche et reste visible pendant la lecture des cartes. Les cartes
   occupent la droite, ce qui supprime la moitié vide observée quand un
   dossier ne comptait qu'un article. */
@media (min-width: 1080px) {
  .blog-group {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(2rem, 3vw, 3.4rem);
    align-items: start;
  }

  .blog-group__head {
    position: sticky;
    top: 5.5rem;
    max-width: none;
    margin-bottom: 0;
  }

  /* Colonne de 280 px : le titre et le décompte passent l'un sous l'autre
     plutôt que de se disputer la même ligne. */
  .blog-group__title {
    display: block;
  }

  .blog-group__count {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .blog-group__back {
    margin-top: 1rem;
    text-align: left;
  }

  /* Un dossier à article unique remplit sa colonne au lieu d'en laisser
     la moitié vide. La mesure de lecture reste bornée : une carte de
     800 px donnerait des lignes de 110 caractères. */
  .blog-group__list:has(> .post-card:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-group__list:has(> .post-card:only-child) .post-card__title,
  .blog-group__list:has(> .post-card:only-child) .post-card__excerpt {
    max-width: 62ch;
  }
}

/* 3. Six certifications tenaient sur cinq colonnes plus une vignette
   orpheline. La grille les répartit sans trou, quelle que soit la largeur. */
.cert-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

/* 4. Les liens de carte se posaient à des hauteurs différentes selon la
   longueur du texte. En colonne flex, ils s'alignent sur le bas. */
.card {
  display: flex;
  flex-direction: column;
}

.card__link {
  margin-top: auto;
  padding-top: 18px;
}

/* 5. Revenir en haut : apparaît après 1,5 écran, discret, 44 px de cible. */
.to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 1.6rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.18s ease;
}

.to-top.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top:hover {
  border-color: var(--color-signal);
  color: var(--color-signal);
}

.to-top:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
  }
}

/* Le bouton « revenir en haut » doit rester au-dessus de la barre d'action
   mobile (56 px, fixe en bas) au lieu de se superposer à elle. */
@media (max-width: 860px) {
  .to-top {
    bottom: calc(56px + 0.9rem);
  }
}

/* Lexique de l'acheteur (/faq/#lexique).

   Douze définitions courtes, chacune reliée à la page qui la détaille.
   Une colonne sur mobile, deux à partir de 900 px, trois au-delà de
   1280 px : la grille reste lisible sans jamais dépasser la mesure. */
.lexique {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 2.2rem 0 0;
  border-top: 1px solid var(--color-line);
}

.lexique__item {
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--color-line);
}

.lexique dt {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-graphite);
  margin-bottom: 0.35rem;
}

.lexique dt span {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.lexique dd {
  margin: 0;
  color: #4a5057;
  font-size: 0.95rem;
  line-height: 1.65;
}

.lexique dd a {
  color: var(--color-signal);
}

@media (min-width: 900px) {
  .lexique {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
}

@media (min-width: 1280px) {
  .lexique {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   R47 — Catalogue et bandeaux sombres.

   Le déplacement dans neuf fiches produit demandait un repère fixe, et les
   pages sombres laissaient courir le texte sur toute la largeur du conteneur.
   ========================================================================== */

/* 1. Rail de références.

   La page /produit/ mesure près de neuf écrans : choisir une référence
   supposait de faire défiler les neuf blocs. Le rail reste collé sous l'en-tête
   pendant toute la traversée du catalogue et n'existe que sur desktop, où la
   place ne manque pas. */
.ref-rail {
  display: none;
}

@media (min-width: 900px) {
  .refs {
    counter-reset: ref;
  }

  .ref-rail {
    display: block;
    position: sticky;
    top: 68px;
    z-index: 40;
    background: rgba(250, 248, 244, 0.94);
    backdrop-filter: blur(8px);
    border-block: 1px solid var(--color-line);
  }

  .ref-rail__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 52px;
    padding-block: 6px;
  }

  .ref-rail__label {
    flex: none;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-steel);
    font-weight: 600;
  }

  .ref-rail__list {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }

  .ref-rail__list::-webkit-scrollbar {
    display: none;
  }

  .ref-rail__list a {
    display: block;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-line);
    background: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-ink);
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease,
      color 0.16s ease;
  }

  .ref-rail__list a:hover {
    border-color: var(--color-steel);
  }

  /* La référence en cours de lecture reste marquée : sur neuf fiches, savoir
     où l'on se trouve vaut mieux qu'un simple sommaire. */
  .ref-rail__list a.is-current {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
  }

  .ref-rail__ask {
    flex: none;
    font-size: 0.82rem;
    color: var(--color-signal);
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Le rail occupe 52 px sous l'en-tête : l'ancre doit s'arrêter plus bas. */
  .refs .product {
    scroll-margin-top: 132px;
  }
}

/* 2. Numérotation des fiches : 03 / 09 donne la position dans le programme
   sans ajouter de texte dans la page. */
@media (min-width: 900px) {
  .refs .product {
    counter-increment: ref;
  }

  .product__index::before {
    content: counter(ref, decimal-leading-zero) " / 09";
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--color-steel);
    font-variant-numeric: tabular-nums;
  }
}

/* 3. Boutons de la fiche produit.

   Neuf fois trois boutons, dont neuf boutons WhatsApp pleine largeur : le
   vert finissait par dominer la page. La hierarchie devient
   devis (principal) / echantillon (secondaire) / WhatsApp (lien simple).
   Les deux colonnes ne prennent effet qu'a partir de 560 px : sous cette
   largeur les libelles tiennent chacun sur une ligne, empiles. */
@media (min-width: 560px) {
  .procure__cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.procure__wa {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 4px 0;
  font-size: 0.88rem;
  color: var(--color-steel);
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.procure__wa:hover {
  color: var(--color-signal);
  border-bottom-color: currentColor;
}

.procure__wa span {
  margin-left: 4px;
}

/* 4. Bandeaux sombres : la mesure de lecture.

   Sur /technologie/ et /a-propos/, le texte courant reposait sur 680 px de
   large pendant que le tableau occupait les 1 240 px du conteneur. La note
   finale courait, elle, sur toute la largeur en 14 px. Les deux extrêmes sont
   ramenés à une mesure lisible et la note remonte en contraste. */
/* 78ch donnait 102 caractères par ligne dans la bande sombre : la largeur
   en ch se règle sur la police de l'élément, pas sur celle du parent, et le
   0,88 rem de la note rend chaque ch plus large que prévu. 62ch = 82. */
.section--graphite .note {
  max-width: 62ch;
  color: #b6bac1;
}

/* La note de sources courait sur 197 caractères par ligne à 12,5 px. */
.sources__note {
  max-width: 62ch;
}

.section--graphite .prose {
  max-width: 68ch;
}

/* 5. Étapes de contrôle qualité : quatre cartes pleine largeur laissaient
   des lignes de 130 caractères. Deux colonnes à partir de 1080 px rétablissent
   une mesure de lecture normale et raccourcissent la page de moitié. */
@media (min-width: 1080px) {
  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 22px;
  }

  .timeline li::after {
    display: none;
  }
}

/* 6. Bandeau de chiffres (/a-propos/) : quatre colonnes de largeurs
   inégales selon la longueur de la valeur. Une grille régulière aligne les
   quatre valeurs sur la même ligne de base. */
@media (min-width: 900px) {
  .section--graphite .stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 7. Contact : les trois canaux côte à côte.

   « Formulaire », « WhatsApp » et « E-mail » s'empilaient en trois cartes
   pleine largeur, chacune pour une phrase : 330 px de hauteur pour trois
   informations que l'acheteur compare d'un coup d'œil. Sur desktop, une
   seule rangée suffit et laisse le formulaire remonter à l'écran. */
@media (min-width: 900px) {
  .contact-ways {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .contact-way {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
}

/* ==========================================================================
   R48 — Rythme de lecture sur grand écran.

   Le décideur B2B consulte ces pages depuis un poste fixe, souvent sur des
   dossiers de 3 000 mots. Aux largeurs de bureau on desserre l'interligne
   et l'espacement des paragraphes : la page respire, l'œil accroche mieux
   d'un paragraphe au suivant, et les intertitres marquent une pause plus
   nette. En dessous de 1200 px, rien ne bouge — le réglage mobile de R40
   reste inchangé.
   ========================================================================== */
@media (min-width: 1200px) {
  .post__body p,
  .prose p {
    line-height: 1.78;
    margin-bottom: 1.34em;
  }

  .post__body h2,
  .prose h2 {
    margin-top: 2.3em;
  }

  .answer p {
    line-height: 1.85;
  }

  .lede {
    line-height: 1.78;
  }
}

/* 8. Gamme : alignement des neuf fiches.

   Le bandeau du bas (quantité minimale et lien « Fiche détaillée ») ne
   tombait pas à la même hauteur d'une fiche à l'autre : la ligne de
   pastilles de caractéristiques passe à deux lignes sur certaines
   références, et la carte concernée grandissait seule. On réserve deux
   lignes pour le titre et deux pour les pastilles, et on force les cartes
   à occuper toute la hauteur de la rangée : les neuf fiches se lisent
   alors sur une seule grille régulière. */
.pcard__name {
  min-height: 2.6em;
}

.pcard__facts {
  min-height: 3.2em;
  align-content: flex-start;
}

.pcards {
  align-items: stretch;
}

/* ==========================================================================
   R49 — Bureau : lisibilité des listes de questions.

   Une sous-page de FAQ aligne désormais jusqu'à soixante-douze questions
   sur deux colonnes. Sur grand écran on desserre l'interligne des
   intitulés et l'on active `text-wrap: pretty` : la coupure de ligne
   évite de laisser un mot isolé en fin de phrase, ce qui arrive souvent
   sur une question longue en colonne étroite.
   ========================================================================== */
@media (min-width: 1200px) {
  .faq details {
    padding: 22px 0;
  }

  .faq summary {
    font-size: 1.13rem;
    line-height: 1.45;
    text-wrap: pretty;
  }

  .faq details p {
    font-size: 0.97rem;
    line-height: 1.75;
    max-width: none;
  }

  .faq-hub__teaser {
    text-wrap: pretty;
  }
}

/* ==========================================================================
   R51 — Figures de fond hors colonne de lecture.

   Les pages de fond (technologie) portent des schémas plus denses qu'une
   figure d'article : six blocs, deux colonnes comparées. Dans la colonne de
   lecture (68ch, ~545 px), la légende interne tombait sous 9 px — illisible
   sur un écran de bureau. Ces figures sortent donc de la colonne et prennent
   la largeur d'un bloc éditorial (880 px), tout en restant alignées à gauche
   sur le texte. En dessous de 960 px, elles rejoignent la colonne normale :
   aucun effet sur mobile.
   ========================================================================== */
@media (min-width: 960px) {
  .post__chart--wide {
    max-width: 880px;
  }
}


/* ==========================================================================
   R53 — Hors catalogue sur /produit/.

   Neuf références publiées, une cinquantaine de plateformes sans fiche :
   la page s'arrêtait sur une phrase « sur demande », qui ne dit rien à un
   moteur de recherche et pas grand-chose à un acheteur. Ces familles sont
   classées par usage — le seul axe sur lequel un distributeur compare —
   et non par numéro de modèle, qui ne veut rien dire pour lui.

   Aucun compteur par famille : la gamme bouge à chaque série et un chiffre
   invérifiable serait repris tel quel par les moteurs génératifs.
   ========================================================================== */

.hc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.hc-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.3rem 1.35rem 1.15rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.hc-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.hc-card__usage {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.62;
  color: #4c5058;
}

.hc-card__label {
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-signal);
}

.hc-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #3c4046;
}

.hc-card__list li {
  position: relative;
  padding-left: 1rem;
}

.hc-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-signal);
  opacity: 0.55;
}

.hc-card__constraint {
  margin: 0.55rem 0 0;
  padding: 0.65rem 0 0.65rem 0.8rem;
  border-left: 2px solid var(--color-line);
  font-size: 0.86rem;
  line-height: 1.6;
  color: #5a5f66;
}

.hc-card__constraint span {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.hc-card__moq {
  margin: auto 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-ink);
}

@media (min-width: 900px) {
  .hc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  /* Cinquième carte : pleine largeur, ses trois envois côte à côte, pour
     éviter la case vide en bas d'une grille de deux colonnes. */
  .hc-card:last-child { grid-column: 1 / -1; }
  .hc-card:last-child .hc-card__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem 1.5rem; }
}

/* --- Demande : trois étapes, sur une ligne en bureau --- */
.hc-steps {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--color-line);
}

.hc-steps__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--color-ink);
}

.hc-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.hc-step {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.hc-step__num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-signal);
  letter-spacing: 0.04em;
  padding-top: 0.1rem;
}

.hc-step__body {
  display: block;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #4c5058;
}

.hc-step__body strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink);
}

@media (min-width: 900px) {
  .hc-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}


/* ==========================================================================
   R57 — Index des profils d'acheteur sur /grossiste/.

   Les cinq sections de profil (distributeur, importateur, enseigne,
   centrale, parapharmacie) s'enchaînaient sur près de 5 000 px, sans
   aucun repère et sans ancre : impossible de sauter à celle qui vous
   concerne, et impossible d'y renvoyer depuis un article. L'index donne
   les cinq cibles en une ligne, avant le premier bloc.

   Les ancres elles-mêmes sont couvertes par la règle existante
   `.section[id] { scroll-margin-top: 5.5rem }`.
   ========================================================================== */
.seg-index {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding-block: 22px 24px;
  background: var(--color-paper);
}

.seg-index__label {
  margin: 0 0 14px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.seg-index__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seg-index__list a {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  grid-template-areas:
    "n t"
    "n d";
  column-gap: 0.4em;
  row-gap: 3px;
  padding-top: 10px;
  border-top: 1px solid transparent;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.seg-index__n {
  grid-area: n;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-steel);
  padding-top: 0.18em;
}

.seg-index__t {
  grid-area: t;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.25;
}

.seg-index__d {
  grid-area: d;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-steel);
}

.seg-index__list a:hover .seg-index__t,
.seg-index__list a:focus-visible .seg-index__t {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.seg-index__list a:hover {
  border-top-color: var(--color-ink);
}

@media (min-width: 640px) {
  .seg-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
}

@media (min-width: 1100px) {
  .seg-index__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 26px; }
  .seg-index__list li + li { border-left: 1px solid var(--color-line); padding-left: 26px; }
  /* Le numéro passe au-dessus du titre : trois lignes empilées, l'ordre du
     DOM reste numéro / titre / description. */
  .seg-index__list a {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "n" "t" "d";
  }
  .seg-index__n { margin-bottom: 2px; padding-top: 0; }
}


/* ============================================================
   R58 — /blog/ : le sommaire des dossiers remonte dans le bandeau
   ------------------------------------------------------------
   Mesure avant : à 1440 px, le bandeau de tête occupait 561 px et la
   première carte commençait à 968 px — sous la ligne de flottaison d'un
   écran 1440x900. Les huit dossiers, eux, étaient dans une barre de
   pastilles placée APRÈS le bandeau, donc invisible au premier écran et
   perdue dès le premier défilement.

   Après : titre et chapeau passent côte à côte au-delà de 1080 px, et le
   sommaire des dossiers entre dans le bandeau sombre. Les huit cibles
   sont visibles sans défiler, sur le même fond que le titre.
   ========================================================================== */
@media (min-width: 1080px) {
  .page-blog .page-head--blog {
    padding-block: clamp(1.5rem, 2.4vw, 2.2rem);
  }

  .page-head--blog .page-head__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: end;
  }

  .page-head--blog .page-head__lead h1 {
    margin-bottom: 0.5rem;
  }

  .page-head--blog .page-head__count {
    margin: 0;
  }

  .page-head--blog .lede {
    margin: 0;
    max-width: 58ch;
  }
}

/* Pastilles de dossiers sur fond graphite : les jetons blancs de la page
   claire ne tenaient pas le contraste ici, il faut inverser la gamme. */
.page-head--blog .blog-clusters {
  margin: 1.25rem 0 0;
  padding: 0.85rem 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-head--blog .blog-clusters__title {
  color: var(--color-moon-dim);
  opacity: 0.72;
}

.page-head--blog .blog-clusters__list a {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--color-moon);
  background: rgba(255, 255, 255, 0.045);
}

.page-head--blog .blog-clusters__list a:hover {
  border-color: var(--color-signal-bright);
  color: var(--color-signal-bright);
  background: rgba(255, 255, 255, 0.09);
}

.page-head--blog .blog-clusters__count {
  color: var(--color-moon-dim);
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   R58 — /contact/ : le formulaire et les canaux sur le même écran
   ------------------------------------------------------------
   Mesure avant : 5 452 px de haut, trois cartes de canaux dans une bande
   pleine largeur, puis le formulaire, puis les engagements de délai. Un
   acheteur qui hésitait entre WhatsApp et le formulaire devait remonter
   de 800 px pour changer d'avis.

   Après : au-delà de 1080 px, le formulaire tient la colonne de gauche et
   les trois canaux passent à droite, dans le même champ de vision que les
   champs. Le rail est collant sous l'en-tête, mais sur un écran de 900 px
   de haut la colonne de formulaire (880 px) est plus courte que la
   fenêtre : l'effet ne se déclenche qu'au-delà d'environ 1 000 px de
   hauteur de fenêtre. C'est un confort, pas le gain principal — le gain
   principal est de ne plus avoir à remonter 800 px pour changer de canal.
   ========================================================================== */
.contact-rail__steps {
  margin-top: 1.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

.contact-rail__steps h2 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.contact-rail .timeline {
  margin-bottom: 1rem;
}

@media (min-width: 1080px) {
  .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: clamp(2.4rem, 4.5vw, 4.6rem);
    align-items: start;
  }

  .contact-rail {
    position: sticky;
    /* L'en-tête mesure 69 px : 80 px laissent 11 px d'air et gagnent 8 px
       de course utile au rail. */
    top: 5rem;
  }

  .contact-layout .form {
    max-width: 700px;
  }

  .contact-rail .contact-ways {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .contact-rail .contact-way {
    padding: 13px 16px 14px;
  }

  .contact-rail .contact-way h2,
  .contact-rail .contact-way h3 {
    font-size: 0.98rem;
    margin-bottom: 0.15rem;
  }

  .contact-rail .contact-way p {
    font-size: 0.88rem;
    line-height: 1.45;
  }
}

/* Panneau « Dans la réponse » : la colonne droite s'arrêtait à 452 px
   quand le formulaire en faisait 880 — un vide de 400 px à droite du
   champ Message. Trois lignes suffisent à le combler avec de
   l'information utile, sans redire les délais de la frise. */
.contact-rail__facts {
  margin-top: 1.6rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: rgba(138, 123, 168, 0.055);
}

.contact-rail__facts-title {
  margin: 0 0 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-steel);
}

/* R60 — le rail doit tenir dans une fenêtre de 900 px.
   ----------------------------------------------------------------
   Mesuré avant, à 1440 de large : le rail faisait 784 px de haut (452 px de
   cartes de canaux + 306 px de panneau « Dans la réponse »), pour un espace
   utile de 661 px sous un en-tête de 88 px. Une colonne plus haute que la
   fenêtre ne peut pas coller : `position: sticky` n'avait donc aucun effet,
   et le commentaire de la R58 qui l'annonçait était faux. Après compactage
   (libellé unique, accroches sur une ligne, cartes à 13 px de marge
   interne), le rail passe sous les 660 px et le suivi devient réel. */
.contact-rail__label {
  margin: 0 0 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.contact-rail__facts ul {
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.contact-rail__facts li {
  position: relative;
  padding-left: 1.05rem;
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #4a5057;
}

.contact-rail__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-signal);
}

.contact-rail__facts .note {
  margin: 0;
  font-size: 0.82rem;
}

.contact-main > h2 {
  margin-bottom: 1.1rem;
}

/* ============================================================
   R59 — /produit/ : les neuf références entrent dans le hero
   ------------------------------------------------------------
   Mesure avant, à 1440 px : le hero occupait 792 px, sa colonne de
   droite ne contenait qu'un disque décoratif de 96 px, et la première
   carte produit tombait à 1 962 px — deux écrans et demi sous la ligne
   de flottaison d'un portable 1440x900, sur la page dont le métier est
   précisément de montrer des produits. Le bloc « Réponse » (289 px), les
   douze pastilles de vocabulaire (473 px, empilées une par ligne dans
   une colonne de 262 px) et la bande de certifications (96 px) se
   succédaient avant la moindre référence.

   Après : la colonne de droite du hero reçoit les neuf vignettes en
   3x3, chacune liée à sa fiche. La hauteur du hero ne bouge pas — elle
   était commandée par la colonne de texte (659 px) et le 3x3 tient dans
   les 560 px restants sous le disque. Aucune image supplémentaire n'est
   téléchargée : ce sont les mêmes fichiers que les cartes du catalogue.
   ============================================================ */
.hero__side {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 30px);
}

.hero__skus {
  margin: 0;
}

.hero__skus-label {
  margin: 0 0 12px;
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-moon-dim);
}

.hero__skus-label span {
  display: inline-block;
  margin-left: 0.55em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(240, 237, 230, 0.1);
  color: var(--color-moon);
  letter-spacing: 0.04em;
}

.hero__skus-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero__skus-item a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 7px 7px 9px;
  border: 1px solid rgba(240, 237, 230, 0.16);
  border-radius: var(--radius);
  background: rgba(240, 237, 230, 0.04);
  text-decoration: none;
}

.hero__skus-item a:hover,
.hero__skus-item a:focus-visible {
  border-color: var(--color-signal-bright);
  background: rgba(240, 237, 230, 0.08);
}

.hero__skus-thumb {
  display: block;
  aspect-ratio: 1;
  border-radius: calc(var(--radius) - 3px);
  overflow: hidden;
  background: rgba(240, 237, 230, 0.06);
}

.hero__skus-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__skus-sku {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-moon);
}

.hero__skus-name {
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--color-moon-dim);
}

@media (max-width: 1099px) {
  .hero__side {
    margin-top: 8px;
  }
  .hero__skus-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Le module « réponse + vocabulaire » : dans une colonne de 262 px, douze
   pastilles empilées forment une pile de boutons de 473 px, plus haute que
   le texte qu'elles accompagnent. En liste simple, les mêmes douze
   libellés tiennent en 250 px et se lisent comme un vocabulaire, ce qu'ils
   sont. Aucun mot n'est retiré de la page. */
@media (min-width: 1080px) {
  .answer-aside .pills {
    display: block;
  }

  .answer-aside .pill {
    display: block;
    padding: 3px 0 3px 14px;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 0.8rem;
    line-height: 1.45;
    position: relative;
  }

  .answer-aside .pill .pill__dot {
    position: absolute;
    left: 0;
    top: 0.62em;
  }
}