/* ═══════════════════════════════════════════════════════════════════
   REBOOT PLAN · lm-rp4.css · lecteur des formations gratuites (DA rp4)
   ───────────────────────────────────────────────────────────────────
   Chargé APRÈS /css/rp4.css (tokens, boutons, icônes, verre). Contrat :
   _brief/lm-rp4/CONTRAT.md §4 (squelette) et §6 (comportements). Doc des
   classes et pièges : _brief/lm-rp4/gabarit/SOCLE.md. Gabarit vivant :
   _brief/lm-rp4/gabarit/index.html.

   Règles tenues ici
   - Toute couleur par token de rp4.css (aucun hex). Teintes douces par
     color-mix() sur un token, avec un repli --fill-* juste au-dessus.
   - Tailles de texte en rem ou tokens --w-*. Cibles du doigt : 44 px.
   - Un seul défileur : la page. La barre du sommaire (collante) porte SEULE
     la safe-area du haut ; aucune section ne la reporte.
   - Sans JS, tout est lisible : ce qui se cache ou s'anime ne le fait que
     sous html.lm-js (posé par js/lm-rp4.js), jamais sous rp4-js.
   - Mouvement : transform et opacity (exceptions bornées : stroke-dashoffset
     des courbes et de l'anneau, peinture SVG seule). Rien ne tourne en
     boucle. Mouvement réduit : rp4.css §25 met toutes les durées à zéro,
     ce fichier pose en plus les états finaux (fin de fichier).
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════ 1. Variables propres au lecteur (dérivées des tokens) ═══════════ */
:root {
  --lm-toc-h: 60px;                                  /* hauteur de la barre du sommaire, hors safe-area */
  --lm-side: max(var(--w-gutter), env(safe-area-inset-left), env(safe-area-inset-right));
  --lm-p-size: 1.0625rem;                            /* = --w-body, une seule taille de paragraphe */
  --lm-p-lh: 1.65;
  --lm-gap-ch: clamp(72px, 3rem + 7vw, 136px);       /* respiration entre deux chapitres */
  --lm-ok-soft: var(--fill-3);
  --lm-ko-soft: var(--fill-3);
  --lm-gold-soft: var(--fill-4);
  --lm-ok-soft: color-mix(in srgb, var(--acc-nutri) 15%, transparent);
  --lm-ko-soft: color-mix(in srgb, var(--danger-text) 12%, transparent);
  --lm-gold-soft: color-mix(in srgb, var(--gold) 14%, transparent);
  /* Couleurs de données : accents de l'app, identiques en clair et en sombre (une donnée ne
     change pas de couleur avec le thème). --acc-train est exclu (il s'inverse en sombre). */
  --lm-d1: var(--gold); --lm-d2: var(--acc-nutri); --lm-d3: var(--acc-steps);
  --lm-d-good: var(--acc-nutri); --lm-d-bad: var(--acc-heart); --lm-d-muted: var(--text4);
}

/* ═══════════ 2. Colonne de lecture ═══════════ */
.lm { display: block; }
/* hidden l'emporte toujours (déjà dans rp4.css ; redit ici : un display: flex de composant ne doit jamais le battre). */
.lm [hidden], .lm[hidden] { display: none !important; }
/* Chaque section porte ses marges latérales (safe-area paysage comprise) et centre ses enfants
   sur la mesure de lecture (680 px). Le sommaire, lui, est pleine largeur. */
.lm-title, .lm-chapter, .lm-tool, .lm-quiz, .lm-close, .lm-foot { padding-left: var(--lm-side); padding-right: var(--lm-side); }
.lm-title > *, .lm-chapter > *, .lm-tool > *, .lm-quiz > *, .lm-close > *, .lm-foot > * { max-width: var(--w-read); margin-left: auto; margin-right: auto; }
.lm [id] { scroll-margin-top: calc(env(safe-area-inset-top) + var(--lm-toc-h) + 20px); }

/* ═══════════ 3. Ouverture plein écran : sceau, quatre phrases en cascade, Commencer ═══════════ */
.lm-opening {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: stretch;
  padding: calc(env(safe-area-inset-top) + 20px) var(--lm-side) calc(env(safe-area-inset-bottom) + 28px);
}
.lm-opening > * { width: 100%; max-width: var(--w-read); margin-left: auto; margin-right: auto; }
.lm-opening__seal {
  align-self: center; width: auto; max-width: 100%;
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px;
  border-radius: var(--r-pill); background: var(--bg2);
  box-shadow: inset 0 0 0 1px var(--fill-4);
  font-size: var(--w-footnote); font-weight: 600; color: var(--text2); line-height: 1.2; text-align: center;
}
.lm-opening__seal svg { width: 20px; height: 20px; flex: none; color: var(--logo); }
/* Les quatre lignes sont centrées verticalement entre le sceau (en haut) et le bouton (en bas). */
.lm-opening__line {
  font-family: var(--font-display); font-size: clamp(1.375rem, 1.05rem + 1.9vw, 2.75rem); /* un cran sous --w-title1 : quatre phrases tiennent dans un écran de téléphone */ font-weight: 600;
  letter-spacing: -.02em; line-height: 1.16; color: var(--text); text-wrap: pretty;
}
.lm-opening__line + .lm-opening__line { margin-top: .55em; }
.lm-opening__line:first-of-type { margin-top: auto; padding-top: 40px; }
.lm-opening__line:last-of-type { margin-bottom: auto; padding-bottom: 40px; }
.lm-opening__line:nth-of-type(2) { color: var(--text3); }
.lm-opening__go { grid-row: 8; margin-top: 28px; }
.lm-opening__go {
  align-self: center; width: min(100%, 360px);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--r-pill);
  background: var(--cta-bg); color: var(--cta-text);
  font-size: var(--w-body); font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lm-opening__go:active { background: var(--cta-bg-pressed); transform: scale(.97); }
.lm-opening__go .rp4-i { width: 18px; height: 18px; }
/* Sans JS, le bouton ne sert à rien : il n'apparaît que lorsque le socle est chargé. */
html:not(.lm-js) .lm-opening__go { visibility: hidden; }
/* Cascade : CSS pur (aucune attente du script), finit TOUJOURS visible, une seule fois.
   Récit d'entrée = palier « rare, première fois » : durées longues assumées (contrat §9 : hero). */
@keyframes lm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .lm-opening__seal { animation: lm-fade 700ms var(--ease-out) 80ms both; }
  .lm-opening__line { animation: lm-rise 820ms var(--ease-out) both; }
  .lm-opening__line:nth-of-type(1) { animation-delay: 260ms; }
  .lm-opening__line:nth-of-type(2) { animation-delay: 860ms; }
  .lm-opening__line:nth-of-type(3) { animation-delay: 1460ms; }
  .lm-opening__line:nth-of-type(4) { animation-delay: 2060ms; }
  .lm-opening__go { animation: lm-rise 620ms var(--ease-out) 2700ms both; }
  /* Revenu sur la page (cascade déjà vue dans cette session) : tout est posé d'emblée. */
  html.lm-seen .lm-opening__seal, html.lm-seen .lm-opening__line, html.lm-seen .lm-opening__go { animation: none; }
}

/* ═══════════ 4. Titre, sous-titre, méta ═══════════ */
.lm-title { padding-top: clamp(56px, 3rem + 4vw, 104px); padding-bottom: 28px; scroll-margin-top: env(safe-area-inset-top); }
.lm-title h1 { font-size: var(--w-display); font-weight: 700; letter-spacing: -.024em; line-height: 1.06; color: var(--text); }
.lm-title h1:focus { outline: none; }
.lm-title__sub { margin-top: 16px; font-size: var(--w-lead); line-height: 1.4; letter-spacing: -.005em; color: var(--text3); }
.lm-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.lm-meta > span {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--fill-3); color: var(--text2);
  font-size: var(--w-footnote); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lm-meta > span:empty { display: none; }

/* ═══════════ 5. Sommaire collant (barre de verre pleine largeur, porte la safe-area) ═══════════ */
/* Construit par le socle depuis [data-chapter-title] : <nav class="lm-toc lm-toc--on"> >
   .lm-toc__strip > a.lm-toc__a (span.lm-toc__n + span.lm-toc__t) + .lm-toc__bar. Sans JS : masqué. */
.lm-toc { display: none; }
.lm-toc.lm-toc--on {
  display: block; position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top);
  isolation: isolate;
}
/* Le verre n'existe qu'une fois la barre collée (en flux, les pastilles sont posées sur le fond). */
.lm-toc--on::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: inset 0 -1px 0 var(--sep);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.lm-toc--on.is-stuck::before { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lm-toc--on::before { background: var(--glass-bg-strong); } }
@media (prefers-reduced-transparency: reduce) { .lm-toc--on::before { background: var(--bg2); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.lm-toc__strip {
  display: flex; gap: 6px; align-items: center; height: var(--lm-toc-h);
  max-width: calc(var(--w-max) + 2 * var(--w-gutter)); margin: 0 auto;
  padding: 0 var(--lm-side); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; scroll-padding: 0 var(--lm-side);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--text) var(--lm-fs, 0px), var(--text) calc(100% - var(--lm-fe, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, var(--text) var(--lm-fs, 0px), var(--text) calc(100% - var(--lm-fe, 0px)), transparent 100%);
}
.lm-toc__strip::-webkit-scrollbar { display: none; }
.lm-toc__strip.is-fade-s { --lm-fs: 28px; }
.lm-toc__strip.is-fade-e { --lm-fe: 28px; }
.lm-toc__a {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border-radius: var(--r-pill); color: var(--text2); background: transparent;
  font-size: .9375rem; font-weight: 600; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.lm-toc__n { font-family: var(--font-rounded); font-variant-numeric: tabular-nums; color: var(--text3); font-weight: 600; }
.lm-toc__a[aria-current="true"] { background: var(--bg2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.04); }
.lm-toc--on.is-stuck .lm-toc__a[aria-current="true"] { background: var(--seg-on); }
.lm-toc__a[aria-current="true"] .lm-toc__n { color: var(--gold-text); }
.lm-toc__a:active { transform: scale(.97); }
.lm-toc__a:focus-visible { outline-offset: -3px; border-radius: var(--r-pill); }
@media (hover: hover) and (pointer: fine) { .lm-toc__a:hover:not([aria-current="true"]) { color: var(--text); background: var(--fill-4); } }
/* Fil de progression de lecture : lié au défilement par le navigateur (scroll-timeline), aucun
   écouteur JS. Là où ce n'est pas géré, il n'existe pas. */
.lm-toc__bar { display: none; }
@supports (animation-timeline: scroll()) {
  .lm-toc__bar {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
    animation: lm-progress linear both; animation-timeline: scroll(root block);
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .lm-toc--on.is-stuck .lm-toc__bar { opacity: 1; }
  @keyframes lm-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ═══════════ 6. Chapitre ═══════════ */
.lm-chapter, .lm-tool, .lm-quiz { padding-top: var(--lm-gap-ch); }
.lm-toc + .lm-chapter { padding-top: clamp(40px, 2rem + 3vw, 72px); }
.lm-chapter__head { margin-bottom: clamp(28px, 1.5rem + 1.5vw, 44px); }
.lm-chapter__num { display: block; font-family: var(--font-rounded); font-size: var(--w-title3); font-weight: 600; line-height: 1; color: var(--gold-text); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.lm-chapter__head h2 { font-size: var(--w-title1); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--text); }
.lm-chapter__sub { margin-top: 12px; font-size: var(--w-lead); line-height: 1.4; letter-spacing: -.005em; color: var(--text3); }
/* Corps : rien que des .lm-p. Une seule taille de paragraphe sur toute la formation. */
.lm-p { font-size: var(--lm-p-size); line-height: var(--lm-p-lh); color: var(--text2); text-wrap: pretty; }
.lm-p + .lm-p { margin-top: 1em; }
.lm-p b, .lm-p strong { color: var(--text); font-weight: 600; }
.lm-p em { font-style: italic; }
.lm-p a:where(:not(.lm-cta)) { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* Blocs qui coupent le texte : même respiration partout. */
.lm-chapter > :is(.lm-stat, .lm-chart, .lm-sci, .lm-key, .lm-do, .lm-refs, .lm-figure),
.lm-tool > :is(.lm-p, .lm-key) + *, .lm-close > :is(.lm-stat, .lm-chart) { margin-top: clamp(32px, 1.6rem + 1.6vw, 48px); }
.lm-chapter > :is(.lm-stat, .lm-chart, .lm-sci, .lm-key, .lm-do) + .lm-p { margin-top: clamp(32px, 1.6rem + 1.6vw, 48px); }

/* ── Chiffre clé (compté à l'entrée) ── */
.lm-stat { display: block; }
.lm-stat__n { font-family: var(--font-rounded); font-size: var(--w-stat); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.lm-stat__u { margin-left: .18em; font-family: var(--font-rounded); font-size: var(--w-title2); font-weight: 600; letter-spacing: -.01em; color: var(--text3); }
.lm-stat__cap { margin-top: 10px; max-width: 34em; font-size: var(--w-callout); line-height: 1.45; color: var(--text3); }

/* ── Carte d'étude ── */
.lm-sci { margin-left: auto; margin-right: auto; background: var(--bg2); border-radius: var(--w-r-bento); padding: 22px 22px 14px; }
.lm-sci__eyebrow { display: flex; align-items: center; gap: 8px; font-size: var(--w-footnote); font-weight: 600; color: var(--text3); line-height: 1.3; margin-bottom: 12px; }
.lm-sci__eyebrow .rp4-i { width: 16px; height: 16px; color: var(--text3); }
.lm-sci__claim { font-size: var(--w-title3); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--text); }
.lm-sci__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 12px; font-size: var(--w-footnote); line-height: 1.4; color: var(--text3); }
.lm-sci__meta span { white-space: nowrap; }
.lm-sci__meta span:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--text4); }
.lm-sci__p { margin-top: 14px; font-size: var(--lm-p-size); line-height: var(--lm-p-lh); color: var(--text2); }
.lm-sci__p b { color: var(--text); font-weight: 600; }
.lm-sci__link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 4px; color: var(--link); font-weight: 600; font-size: var(--w-callout); -webkit-tap-highlight-color: transparent; }
.lm-sci__link .rp4-i { width: 16px; height: 16px; transition: translate var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lm-sci__link:hover { text-decoration: underline; } .lm-sci__link:hover .rp4-i { translate: 2px -2px; } }

/* ── À retenir ── */
.lm-key { background: var(--lm-gold-soft); border-radius: var(--w-r-bento); padding: 22px 22px 24px; }
.lm-key__eyebrow { display: block; font-size: var(--w-footnote); font-weight: 600; color: var(--gold-text); line-height: 1.3; margin-bottom: 10px; }
.lm-key p { font-size: var(--w-title3); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--text); text-wrap: pretty; }
.lm-key p + p { margin-top: .6em; }
/* Variante avertissement : carte neutre, liseré et icône (triangle-alert, posée par le socle si absente)
   à l'encre d'avertissement, texte à l'encre normale. */
.lm-key--warn { background: var(--bg2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warn-text) 45%, transparent); }
.lm-key--warn .lm-key__eyebrow { display: flex; align-items: center; gap: 8px; color: var(--warn-text); }
.lm-key--warn .lm-key__eyebrow .rp4-i { width: 18px; height: 18px; }
.lm-key--warn p { font-size: var(--lm-p-size); font-weight: 500; letter-spacing: 0; line-height: 1.55; color: var(--text); }

/* ── Lien affilié (corps et outils) : pastille sobre « Produit ↗ », jamais le bleu nu.
   Hauteur visuelle 30 px pour tenir dans une ligne de texte, zone de tap étendue à 44 px. ── */
.lm-aff, .lm-p a.lm-aff {
  position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px 0 12px;
  border-radius: var(--r-pill); background: var(--fill-3); color: var(--text); text-decoration: none;
  font-size: .9375em; /* em voulu : la pastille suit la taille du texte qui la porte */ font-weight: 600; line-height: 1.2; white-space: nowrap; vertical-align: baseline;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lm-aff::after { content: "\2197"; font-weight: 600; color: var(--text3); }
.lm-aff::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
.lm-aff:active { background: var(--fill-1); transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .lm-aff:hover { background: var(--fill-2); } }

/* ── Actions à cocher (persistées) ── */
.lm-do { background: var(--bg2); border-radius: var(--w-r-bento); padding: 18px 8px 8px; }
.lm-do__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 6px; font-size: var(--w-callout); font-weight: 600; color: var(--text); }
.lm-do__count { flex: none; min-width: 3.2em; text-align: center; padding: 3px 10px; border-radius: var(--r-pill); background: var(--fill-3); color: var(--text2); font-size: var(--w-footnote); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.lm-do__count:empty { display: none; }
.lm-do.is-complete .lm-do__count { background: var(--lm-ok-soft); color: var(--ok-text); }
.lm-do__list { list-style: none; margin: 0; padding: 0; }
.lm-do__list > li { position: relative; }
.lm-do__list > li + li::before { content: ""; position: absolute; top: 0; left: 50px; right: 12px; height: 1px; background: var(--sep); pointer-events: none; }
.lm-do__list label { display: flex; align-items: flex-start; gap: 14px; min-height: 52px; padding: 14px 12px; border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-fast) var(--ease-out); }
.lm-do__list label:active { background: var(--fill-4); }
.lm-do__list label > span { flex: 1; min-width: 0; font-size: var(--lm-p-size); line-height: 1.45; color: var(--text); transition: color var(--dur-base) var(--ease-out); }
/* Case ronde façon Rappels : cercle à l'encre, rempli à l'encre une fois cochée, coche tracée en CSS. */
.lm-do__list input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative;
  width: 24px; height: 24px; margin: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--text4); background: transparent; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lm-do__list input[type="checkbox"]::after {
  content: ""; position: absolute; left: 8.5px; top: 4.5px; width: 5px; height: 10px;
  border: solid var(--cta-text); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg) scale(.6); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lm-do__list input[type="checkbox"]:checked { background: var(--cta-bg); box-shadow: none; }
.lm-do__list input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.lm-do__list input[type="checkbox"]:active { transform: scale(.9); }
.lm-do__list input[type="checkbox"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lm-do__list input:checked + span { color: var(--text3); }
@media (hover: hover) and (pointer: fine) { .lm-do__list label:hover { background: var(--fill-4); } }

/* ── Références repliées ── */
.lm-refs { border-radius: var(--r-card); background: transparent; }
.lm-refs > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; width: max-content; max-width: 100%;
  color: var(--text3); font-size: var(--w-footnote); font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 10px;
}
.lm-refs > summary::-webkit-details-marker { display: none; }
.lm-refs > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-base) var(--ease-out); }
.lm-refs[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .lm-refs > summary:hover { color: var(--text); } }
.lm-refs ol { margin: 4px 0 0; padding-left: 1.4em; font-size: var(--w-footnote); line-height: 1.5; color: var(--text3); }
.lm-refs li + li { margin-top: .5em; }
.lm-refs a { color: var(--link); display: inline-flex; align-items: center; min-height: 32px; }
.lm-refs::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete; }
.lm-refs[open]::details-content { block-size: auto; }
.lm-refs > ol { opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.lm-refs[open] > ol { opacity: 1; transform: none; }
@starting-style { .lm-refs[open] > ol { opacity: 0; transform: translateY(-6px); } }

/* ═══════════ 7. Graphiques (.lm-chart[data-chart], même JSON que lm-formation.js) ═══════════
   Titre et source : dans la page (.lm-chart__t, .lm-chart__src, lisibles sans JS) OU dans le JSON
   (title, source). Le socle insère .lm-chart__body entre les deux. */
.lm-chart { background: var(--bg2); border-radius: var(--w-r-bento); padding: 20px 20px 18px; }
.lm-chart__t { font-size: var(--w-callout); font-weight: 600; line-height: 1.35; letter-spacing: -.005em; color: var(--text); margin-bottom: 18px; }
.lm-chart__src { margin-top: 16px; font-size: var(--w-footnote); line-height: 1.45; color: var(--text3); }
.lm-chart__body { min-height: 24px; }
/* Enveloppe de l'ancien lecteur (.lm-chart__box) : neutre, la carte reste .lm-chart. */
.lm-chart__box { display: block; }
/* barres horizontales */
.lm-chart__rows { display: grid; gap: 14px; }
.lm-chart__row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.lm-chart__label { font-size: var(--w-footnote); line-height: 1.35; color: var(--text); min-width: 0; }
.lm-chart__label small { display: block; font-size: var(--w-caption); line-height: 1.35; color: var(--text3); margin-top: 2px; }
.lm-chart__track { position: relative; height: 12px; border-radius: 6px; background: var(--fill-3); overflow: hidden; }
.lm-chart__axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--text4); }
.lm-chart__fill { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--lm-d1); }
.lm-chart__row.is-muted .lm-chart__fill { background: var(--lm-d-muted); }
.lm-chart__row.tone-good .lm-chart__fill { background: var(--lm-d-good); }
.lm-chart__row.tone-bad .lm-chart__fill { background: var(--lm-d-bad); }
.lm-chart__row.tone-petrol .lm-chart__fill { background: var(--lm-d2); }
.lm-chart__val { font-family: var(--font-rounded); font-weight: 600; font-size: var(--w-callout); letter-spacing: -.01em; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.lm-chart__row.is-hi .lm-chart__val { color: var(--gold-text); }
.lm-chart__row.tone-good .lm-chart__val { color: var(--ok-text); }
.lm-chart__row.tone-bad .lm-chart__val { color: var(--danger-text); }
.lm-chart__row.is-muted .lm-chart__val, .lm-chart__row.is-muted .lm-chart__label { color: var(--text3); }
/* colonnes groupées */
.lm-chart__cols { display: flex; gap: 16px; justify-content: center; align-items: flex-end; }
.lm-chart__group { flex: 1 1 0; min-width: 0; text-align: center; }
.lm-chart__bars { display: flex; gap: 8px; justify-content: center; align-items: flex-end; height: 160px; }
.lm-chart__colwrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 0 1 46px; min-width: 0; }
.lm-chart__cval { font-family: var(--font-rounded); font-weight: 600; font-size: var(--w-footnote); color: var(--text); margin-bottom: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lm-chart__col { width: 100%; height: var(--h, 50%); border-radius: 8px 8px 3px 3px; background: var(--lm-d1); transform-origin: bottom center; }
.lm-chart__col.s2 { background: var(--lm-d2); }
.lm-chart__col.s3 { background: var(--lm-d3); }
.lm-chart__glabel { font-size: var(--w-footnote); line-height: 1.35; color: var(--text3); margin-top: 10px; }
.lm-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: var(--w-footnote); line-height: 1.4; color: var(--text3); }
.lm-chart__lg { display: inline-flex; align-items: center; gap: 7px; }
.lm-chart__lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--lm-d1); }
.lm-chart__lg.s2 i, .lm-chart__lg.tone-petrol i, .lm-chart__lg.tone-good i { background: var(--lm-d2); }
.lm-chart__lg.s3 i { background: var(--lm-d3); }
.lm-chart__lg.tone-bad i { background: var(--lm-d-bad); }
.lm-chart__lg.tone-muted i { background: var(--lm-d-muted); }
.lm-chart__lg.tone-empty i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text4); }
/* courbes (SVG 320 × 170 : tailles de texte en unités utilisateur, posées en attribut par le script) */
.lm-chart__svg { width: 100%; height: auto; display: block; overflow: hidden; }
.lm-chart__gridline { stroke: var(--sep); stroke-width: 1; }
.lm-chart__marker { stroke: var(--text3); stroke-width: 1; stroke-dasharray: 3 3; }
.lm-chart__mtext, .lm-chart__xtext { font-family: var(--font); fill: var(--text3); }
.lm-chart__mtext { fill: var(--text2); font-weight: 600; }
.lm-chart__etext { font-family: var(--font-rounded); font-weight: 700; fill: var(--gold-text); }
.lm-chart__etext.tone-muted { fill: var(--text3); }
.lm-chart__etext.tone-petrol, .lm-chart__etext.tone-good { fill: var(--ok-text); }
.lm-chart__etext.tone-bad { fill: var(--danger-text); }
.lm-chart__path { fill: none; stroke: var(--lm-d1); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lm-chart__path.tone-muted { stroke: var(--lm-d-muted); stroke-width: 2; }
.lm-chart__path.tone-petrol, .lm-chart__path.tone-good { stroke: var(--lm-d2); }
.lm-chart__path.tone-bad { stroke: var(--lm-d-bad); }
.lm-chart__area { fill: var(--lm-d1); opacity: .12; }
.lm-chart__area.tone-petrol, .lm-chart__area.tone-good { fill: var(--lm-d2); }
.lm-chart__area.tone-muted { fill: var(--lm-d-muted); }
.lm-chart__dot { fill: var(--lm-d1); }
.lm-chart__dot.tone-muted { fill: var(--lm-d-muted); }
.lm-chart__dot.tone-petrol, .lm-chart__dot.tone-good { fill: var(--lm-d2); }
.lm-chart__dot.tone-bad { fill: var(--lm-d-bad); }
/* grille de cases */
.lm-chart__grid { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 8px; max-width: 320px; margin: 0 auto; }
.lm-chart__cell { aspect-ratio: 1; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--text4); }
.lm-chart__cell.is-filled { background: var(--lm-d1); box-shadow: none; }
@media (max-width: 420px) {
  .lm-chart { padding: 18px 16px 16px; }
  .lm-chart__row { gap: 10px; }
  .lm-chart__bars { height: 140px; }
}
/* Entrée à l'écran (une fois) : seulement sous html.lm-js. La classe lm-chart--anim est posée par le
   socle sur les graphiques encore hors de l'écran ; is-in à leur entrée. */
.lm-js .lm-chart--anim .lm-chart__fill { transform: scaleX(0); transition: transform 900ms var(--ease-out) var(--d, 0ms); }
.lm-js .lm-chart--anim .lm-chart__col { transform: scaleY(0); transition: transform 800ms var(--ease-out) var(--d, 0ms); }
.lm-js .lm-chart--anim .lm-chart__cell { transform: scale(.85); opacity: 0; transition: transform 420ms var(--ease-out) var(--d, 0ms), opacity 420ms var(--ease-out) var(--d, 0ms); }
.lm-js .lm-chart--anim .lm-chart__path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--ease-out) var(--d, 0ms); }
.lm-js .lm-chart--anim .lm-chart__dot { opacity: 0; transition: opacity 300ms var(--ease-out) var(--d, 0ms); }
.lm-js .lm-chart--anim .lm-chart__area { opacity: 0; transition: opacity 800ms var(--ease-out) 700ms; }
.lm-js .lm-chart--anim.is-in .lm-chart__fill { transform: scaleX(1); }
.lm-js .lm-chart--anim.is-in .lm-chart__col { transform: scaleY(1); }
.lm-js .lm-chart--anim.is-in .lm-chart__cell { transform: none; opacity: 1; }
.lm-js .lm-chart--anim.is-in .lm-chart__path { stroke-dashoffset: 0; }
.lm-js .lm-chart--anim.is-in .lm-chart__dot { opacity: 1; }
.lm-js .lm-chart--anim.is-in .lm-chart__area { opacity: .12; }

/* ═══════════ 8. Outil (module inline de la page) ═══════════ */
.lm-tool__box { margin-top: clamp(28px, 1.5rem + 1.5vw, 40px); background: var(--bg2); border-radius: var(--w-r-bento); padding: clamp(20px, 1rem + 2vw, 32px); }
.lm-chapter__head + .lm-tool__box, .lm-chapter__head + .lm-p { margin-top: 0; }
/* Briques prêtes pour les modules (port de lm-formation.css, mêmes noms) */
.lm-calc__intro { font-size: var(--lm-p-size); line-height: 1.5; color: var(--text2); margin-bottom: 20px; }
.lm-calc__fields { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .lm-calc__fields { grid-template-columns: 1fr 1fr; gap: 20px 22px; } }
.lm-calc__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lm-calc__field--full { grid-column: 1 / -1; }
.lm-calc__label { font-size: var(--w-footnote); font-weight: 600; color: var(--text2); }
.lm-calc__wrap { position: relative; display: flex; align-items: center; }
.lm-calc__input {
  width: 100%; min-width: 0; min-height: 52px; padding: 12px 64px 12px 16px;
  border: 0; border-radius: 14px; background: var(--fill-4); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--fill-3);
  font-family: var(--font-rounded); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
  transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.lm-calc__input::-webkit-outer-spin-button, .lm-calc__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lm-calc__input:focus { outline: none; background: var(--bg2); box-shadow: inset 0 0 0 2px var(--focus), 0 0 0 4px var(--focus-a30); }
.lm-calc__input[aria-invalid="true"], .lm-calc__input.is-invalid { box-shadow: inset 0 0 0 2px var(--danger-text); }
.lm-calc__unit { position: absolute; right: 16px; font-size: var(--w-footnote); font-weight: 600; color: var(--text3); pointer-events: none; }
select.lm-calc__input { -webkit-appearance: none; appearance: none; padding-right: 44px; font-family: var(--font); font-size: var(--w-body); }
.lm-calc__select-wrap::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; border: solid var(--text3); border-width: 0 1.8px 1.8px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.lm-calc__hint { font-size: var(--w-footnote); line-height: 1.45; color: var(--text3); }
.lm-calc__error { font-size: var(--w-footnote); line-height: 1.45; color: var(--danger-text); }
/* Choix exclusifs (aria-pressed), en pilule segmentée ou en liste */
.lm-calc__choices { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .lm-calc__choices--2 { grid-template-columns: 1fr 1fr; } }
.lm-calc__choice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 52px; padding: 12px 16px; border: 0; border-radius: 14px; text-align: left; cursor: pointer;
  background: var(--fill-4); color: var(--text); box-shadow: inset 0 0 0 1px var(--fill-3);
  font-size: var(--w-callout); font-weight: 600; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lm-calc__choice small { font-weight: 500; font-size: var(--w-footnote); color: var(--text3); }
.lm-calc__choice:active { transform: scale(.985); }
.lm-calc__choice[aria-pressed="true"] { background: var(--bg2); box-shadow: inset 0 0 0 2px var(--cta-bg); }
.lm-seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--fill-3); }
.lm-seg > button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text2); font-size: var(--w-callout); font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.lm-seg > button[aria-pressed="true"] { background: var(--seg-on); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.04); }
.lm-calc__submit-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Boutons du lecteur (jamais avec rp4-btn--primary : rp4.js y pose déjà son haptique) */
.lm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border: 0; border-radius: var(--r-pill);
  background: var(--cta-bg); color: var(--cta-text); font-size: var(--w-body); font-weight: 600;
  white-space: nowrap; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lm-btn:active { background: var(--cta-bg-pressed); transform: scale(.97); }
.lm-btn:disabled, .lm-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.lm-btn--block { width: 100%; }
.lm-btn--ghost { background: var(--fill-3); color: var(--text); min-height: 44px; padding: 0 18px; font-size: var(--w-callout); }
.lm-btn--ghost:active { background: var(--fill-1); }
.lm-btn .rp4-i { width: 18px; height: 18px; }
/* Bouton de choix (outil) : .lm-btn + aria-pressed. Non choisi = remplissage gris, choisi = encre. */
.lm-btn[aria-pressed] { min-height: 44px; padding: 0 18px; font-size: var(--w-callout); }
.lm-btn[aria-pressed="false"] { background: var(--fill-3); color: var(--text); }
.lm-btn[aria-pressed="false"]:active { background: var(--fill-1); }
.lm-btn[aria-pressed="true"] { background: var(--cta-bg); color: var(--cta-text); }
@media (hover: hover) and (pointer: fine) {
  .lm-btn:not(:disabled):hover { background: var(--cta-bg-pressed); }
  .lm-btn--ghost:not(:disabled):hover, .lm-btn[aria-pressed="false"]:not(:disabled):hover { background: var(--fill-2); }
  .lm-calc__choice:not([aria-pressed="true"]):hover { background: var(--fill-3); }
  .lm-seg > button:not([aria-pressed="true"]):hover { color: var(--text); }
}
/* ── Formulaire générique des outils (lm-tool__*) : une page n'a plus besoin de son <style> ──
   field (div ou fieldset) > label/legend.lm-tool__label + contrôle + p.lm-tool__hint ;
   .lm-tool__input = input, select ou textarea ; .lm-tool__seg = pastilles à bascule
   (button[aria-pressed] OU label > input[type=radio|checkbox] + span) ; .lm-tool__days = sept cases
   (mêmes deux formes) ; .lm-tool__btn (+ --ghost) ; .lm-tool__out = zone de résultat ([hidden]
   respecté) ; .lm-tool__kpis > .lm-tool__kpi (__k, __v avec small, __s) = tuiles de chiffres. */
.lm-tool__form { display: grid; gap: 22px; }
.lm-tool__field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.lm-tool__label, .lm-tool__field > legend { padding: 0; margin: 0 0 2px; font-size: var(--w-callout); font-weight: 600; line-height: 1.35; color: var(--text); }
.lm-tool__hint { font-size: var(--w-footnote); line-height: 1.45; color: var(--text3); }
.lm-tool__input {
  width: 100%; min-width: 0; min-height: 50px; padding: 12px 16px; border: 0; border-radius: 14px;
  background: var(--fill-4); color: var(--text); box-shadow: inset 0 0 0 1px var(--fill-3);
  font-size: var(--w-body); font-weight: 500; line-height: 1.3;
  transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.lm-tool__input[type="number"] { font-family: var(--font-rounded); font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.lm-tool__input::-webkit-outer-spin-button, .lm-tool__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
select.lm-tool__input { -webkit-appearance: none; appearance: none; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text3) 50%), linear-gradient(135deg, var(--text3) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
textarea.lm-tool__input { min-height: 96px; resize: vertical; }
.lm-tool__input:focus { outline: none; background: var(--bg2); box-shadow: inset 0 0 0 2px var(--focus), 0 0 0 4px var(--focus-a30); }
.lm-tool__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger-text); }
.lm-tool__seg, .lm-tool__days { display: flex; flex-wrap: wrap; gap: 8px; }
.lm-tool__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.lm-tool__seg > button, .lm-tool__days > button, .lm-tool__seg label > span, .lm-tool__days label > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--r-pill); background: var(--fill-3); color: var(--text);
  font-size: var(--w-callout); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lm-tool__days > button, .lm-tool__days label > span { width: 100%; padding: 0; border-radius: 12px; font-size: var(--w-footnote); }
.lm-tool__seg label, .lm-tool__days label { position: relative; display: block; min-width: 0; }
.lm-tool__seg label > input, .lm-tool__days label > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lm-tool__seg > button[aria-pressed="true"], .lm-tool__days > button[aria-pressed="true"],
.lm-tool__seg label > input:checked + span, .lm-tool__days label > input:checked + span { background: var(--cta-bg); color: var(--cta-text); }
.lm-tool__seg > button:active, .lm-tool__days > button:active, .lm-tool__seg label:active > span, .lm-tool__days label:active > span { transform: scale(.96); }
.lm-tool__seg label > input:focus-visible + span, .lm-tool__days label > input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .lm-tool__seg > button:not([aria-pressed="true"]):hover, .lm-tool__days > button:not([aria-pressed="true"]):hover,
  .lm-tool__seg label > input:not(:checked) + span:hover, .lm-tool__days label > input:not(:checked) + span:hover { background: var(--fill-2); }
}
.lm-tool__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px;
  border: 0; border-radius: var(--r-pill); background: var(--cta-bg); color: var(--cta-text);
  font-size: var(--w-body); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lm-tool__btn:active { background: var(--cta-bg-pressed); transform: scale(.97); }
.lm-tool__btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.lm-tool__btn--ghost { min-height: 44px; padding: 0 18px; background: var(--fill-3); color: var(--text); font-size: var(--w-callout); }
.lm-tool__btn--ghost:active { background: var(--fill-1); }
@media (hover: hover) and (pointer: fine) { .lm-tool__btn:not(:disabled):hover { background: var(--cta-bg-pressed); } .lm-tool__btn--ghost:not(:disabled):hover { background: var(--fill-2); } }
.lm-tool__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lm-tool__out { display: block; margin-top: 24px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--sep); }
.lm-tool__out > * { margin-top: 0; margin-bottom: 0; }
.lm-tool__out > * + * { margin-top: 16px; }
.lm-tool__out[hidden] { display: none; }
.lm-tool__out .lm-chart, .lm-tool__box .lm-chart { background: var(--bg); }
.lm-tool__out .lm-plan__tablewrap .lm-plan__table :is(th, td):first-child, .lm-tool__out .lm-plan__table thead th { background: var(--bg2); }
.lm-tool__out.is-in { animation: lm-rise 420ms var(--ease-out) both; }
.lm-tool__out .lm-p, .lm-tool__note { font-size: var(--lm-p-size); line-height: 1.55; color: var(--text2); }
.lm-tool__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 8px; }
.lm-tool__kpi { min-width: 0; padding: 14px 14px 12px; border-radius: 16px; background: var(--fill-4); }
.lm-tool__kpi--hero { grid-column: 1 / -1; padding: 20px 18px 18px; text-align: center; background: var(--bg); }
.lm-tool__kpi__k, .lm-tool__kpi-k { display: block; font-size: var(--w-caption); font-weight: 600; line-height: 1.3; color: var(--text3); margin-bottom: 6px; }
.lm-tool__kpi__v, .lm-tool__kpi-v { display: block; font-family: var(--font-rounded); font-size: var(--w-title2); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lm-tool__kpi--hero .lm-tool__kpi__v, .lm-tool__kpi--hero .lm-tool__kpi-v { font-size: var(--w-stat); }
.lm-tool__kpi__v small, .lm-tool__kpi-v small { margin-left: 3px; font-size: .5em; font-weight: 600; color: var(--text3); letter-spacing: 0; }
.lm-tool__kpi__s, .lm-tool__kpi-s { display: block; margin-top: 6px; font-size: var(--w-footnote); line-height: 1.4; color: var(--text3); }
.lm-tool__saved { font-size: var(--w-footnote); color: var(--text3); }
@media (prefers-reduced-motion: reduce) {
  .lm-tool__out.is-in { animation: none; }
  .lm-tool__seg > button:active, .lm-tool__days > button:active, .lm-tool__seg label:active > span, .lm-tool__days label:active > span, .lm-tool__btn:active { transform: none; }
}
/* Résultat : « ton plan » */
.lm-plan { margin-top: 28px; }
.lm-js .lm-plan:not(.is-active) { display: none; }
.lm-plan.is-active { animation: lm-rise 420ms var(--ease-out) both; }
.lm-plan__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lm-plan__cell { background: var(--fill-4); border-radius: 16px; padding: 14px 12px; min-width: 0; }
.lm-plan__cell--hero { grid-column: 1 / -1; padding: 22px 18px 20px; text-align: center; background: var(--bg); }
.lm-plan__k { font-size: var(--w-caption); font-weight: 600; color: var(--text3); line-height: 1.3; margin-bottom: 6px; }
.lm-plan__v { font-family: var(--font-rounded); font-size: var(--w-title2); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lm-plan__cell--hero .lm-plan__v { font-size: var(--w-stat); }
.lm-plan__v small { margin-left: 3px; font-size: .45em; font-weight: 600; color: var(--text3); letter-spacing: 0; }
.lm-plan__sub { margin-top: 6px; font-size: var(--w-footnote); line-height: 1.4; color: var(--text3); }
.lm-plan__cell--hero .lm-plan__sub { max-width: 28em; margin: 10px auto 0; color: var(--text2); font-size: var(--w-callout); }
.lm-plan__steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.lm-plan__step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--fill-4); }
.lm-plan__step.is-now { box-shadow: inset 0 0 0 2px var(--gold); }
.lm-plan__step-n { font-family: var(--font-rounded); font-size: var(--w-footnote); font-weight: 600; color: var(--text3); font-variant-numeric: tabular-nums; }
.lm-plan__step-t { font-size: var(--w-callout); font-weight: 600; line-height: 1.35; color: var(--text); min-width: 0; }
.lm-plan__step-t small { display: block; font-weight: 500; font-size: var(--w-footnote); color: var(--text3); margin-top: 2px; }
.lm-plan__step-v { font-family: var(--font-rounded); font-weight: 600; font-size: var(--w-body); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lm-plan .lm-chart { margin-top: 16px; background: var(--bg); }
.lm-plan__note { margin-top: 16px; font-size: var(--lm-p-size); line-height: 1.55; color: var(--text2); }
.lm-plan__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.lm-plan__saved { font-size: var(--w-footnote); color: var(--text3); }

/* ── Résultat long : sept jours dépliables, tableau ──
   details.lm-plan__day > summary (span.lm-plan__day-t + span.lm-plan__day-m facultatif) + contenu.
   table.lm-plan__table : seul, son en-tête colle sous le sommaire ; dans div.lm-plan__tablewrap
   (défilement horizontal si le tableau déborde à 390 px), c'est la première colonne qui colle à gauche. */
.lm-plan__days { display: grid; gap: 8px; }
.lm-plan__day { border-radius: 16px; background: var(--fill-4); }
.lm-plan__day > summary {
  list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px;
  cursor: pointer; border-radius: 16px; -webkit-tap-highlight-color: transparent;
  font-size: var(--w-callout); font-weight: 600; color: var(--text);
}
.lm-plan__day > summary::-webkit-details-marker { display: none; }
.lm-plan__day > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px; border: solid var(--text3); border-width: 0 1.8px 1.8px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-base) var(--ease-out); }
.lm-plan__day[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.lm-plan__day-t { flex: 1; min-width: 0; }
.lm-plan__day-m { flex: none; font-family: var(--font-rounded); font-size: var(--w-footnote); font-weight: 600; color: var(--text3); font-variant-numeric: tabular-nums; }
.lm-plan__day > summary + * { margin-top: 0; }
.lm-plan__day > :not(summary) { padding: 0 16px; }
.lm-plan__day > :not(summary):last-child { padding-bottom: 16px; }
.lm-plan__day > :not(summary) + :not(summary) { margin-top: 10px; }
.lm-plan__day p, .lm-plan__day li { font-size: var(--w-callout); line-height: 1.5; color: var(--text2); }
.lm-plan__day ul, .lm-plan__day ol { margin: 0; padding-left: 1.2em; }
.lm-plan__day li + li { margin-top: .35em; }
.lm-plan__day::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete; }
.lm-plan__day[open]::details-content { block-size: auto; }
@media (hover: hover) and (pointer: fine) { .lm-plan__day > summary:hover { background: var(--fill-4); } }
.lm-plan__tablewrap { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; margin: 0 -4px; padding: 0 4px; border-radius: 12px; }
.lm-plan__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--w-footnote); line-height: 1.35; color: var(--text2); font-variant-numeric: tabular-nums; }
.lm-plan__table th, .lm-plan__table td { padding: 10px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sep); }
.lm-plan__table thead th { font-weight: 600; color: var(--text3); background: var(--bg2); position: sticky; top: calc(env(safe-area-inset-top) + var(--lm-toc-h)); z-index: 1; }
.lm-plan__table tbody th { font-weight: 600; color: var(--text); }
.lm-plan__table td.is-num, .lm-plan__table th.is-num { text-align: right; white-space: nowrap; }
.lm-plan__table tr:last-child > * { border-bottom: 0; }
.lm-plan__tablewrap .lm-plan__table { width: max-content; min-width: 100%; }
.lm-plan__tablewrap .lm-plan__table thead th { position: static; top: auto; }
.lm-plan__tablewrap .lm-plan__table thead th:first-child { z-index: 2; }
.lm-plan__tablewrap .lm-plan__table :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--bg2); box-shadow: 1px 0 0 var(--sep); }

/* ═══════════ 9. Quiz (cinq questions visibles, une par chapitre) ═══════════ */
.lm-quiz__q { background: var(--bg2); border-radius: var(--w-r-bento); padding: 20px 16px 16px; margin-top: 16px; }
.lm-quiz > .lm-chapter__head + .lm-quiz__q { margin-top: 0; }
.lm-quiz__t { padding: 0 4px; font-size: var(--w-title3); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--text); margin-bottom: 14px; text-wrap: pretty; }
.lm-quiz__n { display: block; margin-bottom: 6px; font-family: var(--font-rounded); font-size: var(--w-footnote); font-weight: 600; color: var(--text3); font-variant-numeric: tabular-nums; }
.lm-quiz__a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 52px; padding: 12px 16px; margin-top: 8px; border: 0; border-radius: 14px; text-align: left;
  background: var(--fill-4); color: var(--text); box-shadow: inset 0 0 0 1px var(--fill-3);
  font-size: var(--w-callout); font-weight: 500; line-height: 1.4; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lm-quiz__t + .lm-quiz__a { margin-top: 0; }
.lm-quiz__a:active { transform: scale(.985); }
.lm-quiz__mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--cta-text); }
.lm-quiz__mark .rp4-i { width: 15px; height: 15px; stroke-width: 3; }
.lm-quiz__a.is-correct { background: var(--lm-ok-soft); box-shadow: inset 0 0 0 1.5px var(--ok-text); font-weight: 600; }
.lm-quiz__a.is-correct .lm-quiz__mark { background: var(--ok-text); color: var(--bg2); }
.lm-quiz__a.is-wrong { background: var(--lm-ko-soft); box-shadow: inset 0 0 0 1.5px var(--danger-text); }
.lm-quiz__a.is-wrong .lm-quiz__mark { background: var(--danger-text); color: var(--bg2); }
.lm-quiz__q.is-locked .lm-quiz__a { cursor: default; }
.lm-quiz__q.is-locked .lm-quiz__a:active { transform: none; }
.lm-quiz__q.is-locked .lm-quiz__a:not(.is-correct):not(.is-wrong) { opacity: .5; }
@media (hover: hover) and (pointer: fine) { .lm-quiz__q:not(.is-locked) .lm-quiz__a:hover { background: var(--fill-3); } }
.lm-quiz__why { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg); font-size: var(--lm-p-size); line-height: 1.55; color: var(--text2); }
.lm-quiz__why b { color: var(--text); font-weight: 600; }
/* Sans JS : l'explication reste visible (le quiz devient un texte). Avec JS : après la réponse. */
.lm-js .lm-quiz--on .lm-quiz__why { display: none; }
.lm-js .lm-quiz--on .lm-quiz__q.is-locked .lm-quiz__why { display: block; animation: lm-rise 320ms var(--ease-out) both; }
.lm-quiz__q.is-restored .lm-quiz__why { animation: none !important; }
.lm-quiz__progress { margin-top: 18px; font-size: var(--w-footnote); font-weight: 600; color: var(--text3); text-align: center; font-variant-numeric: tabular-nums; }
/* Résultat : anneau N / 5, verdict, « À relire » */
.lm-quiz__result { margin-top: 24px; background: var(--bg2); border-radius: var(--w-r-bento); padding: 28px 20px 20px; text-align: center; }
.lm-quiz__result.is-shown { animation: lm-rise 480ms var(--ease-out) both; }
.lm-ring { position: relative; width: 132px; height: 132px; margin: 0 auto 18px; }
.lm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.lm-ring__track { fill: none; stroke: var(--fill-3); stroke-width: 10; }
.lm-ring__fill { fill: none; stroke: var(--gold); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1100ms var(--ease-out) 120ms; }
.lm-ring__num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-rounded); font-size: var(--w-title1); font-weight: 600; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.lm-quiz__rt { font-size: var(--w-title2); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; color: var(--text); }
.lm-quiz__rx { max-width: 32em; margin: 10px auto 0; font-size: var(--lm-p-size); line-height: 1.55; color: var(--text2); }
.lm-quiz__relire { margin-top: 22px; text-align: left; }
.lm-quiz__relire-t { font-size: var(--w-footnote); font-weight: 600; color: var(--text3); margin: 0 4px 8px; }
.lm-quiz__relire ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lm-leak { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: 14px; background: var(--fill-4); color: var(--text); -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.lm-leak:active { transform: scale(.985); background: var(--fill-3); }
.lm-leak__txt { flex: 1; min-width: 0; }
.lm-leak__name { display: block; font-weight: 600; font-size: var(--w-callout); color: var(--text); }
.lm-leak__do { display: block; margin-top: 2px; font-size: var(--w-footnote); line-height: 1.4; color: var(--text3); }
.lm-leak > .rp4-i { color: var(--text4); width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .lm-leak:hover { background: var(--fill-3); } }
.lm-quiz__again { margin-top: 18px; }
.lm-quiz__saved { margin-top: 10px; font-size: var(--w-footnote); color: var(--text3); }

/* ═══════════ 10. Clôture : récap, pont, citation, offre, CTA, PS, mention ═══════════ */
.lm-close { padding-top: var(--lm-gap-ch); }
.lm-close__recap:empty { display: none; }
.lm-close__recap { background: var(--bg2); border-radius: var(--w-r-bento); padding: 20px 20px 18px; margin-bottom: clamp(36px, 2rem + 2vw, 56px); }
.lm-recap__label { font-size: var(--w-footnote); font-weight: 600; color: var(--text3); margin-bottom: 12px; }
.lm-recap__bar { height: 6px; border-radius: 3px; background: var(--fill-3); overflow: hidden; margin-bottom: 14px; }
.lm-recap__bar > span { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 900ms var(--ease-out); }
.lm-recap__txt { font-size: var(--lm-p-size); line-height: 1.5; color: var(--text2); }
.lm-recap__txt b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.lm-close__quote {
  margin: clamp(40px, 2rem + 3vw, 72px) auto; padding: 0;
  font-size: var(--w-title2); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--text); text-wrap: balance;
}
.lm-close__quote p + p { margin-top: .5em; }
.lm-close__quote cite, .lm-close__quote footer { display: block; margin-top: 14px; font-size: var(--w-footnote); font-style: normal; font-weight: 600; letter-spacing: 0; color: var(--text3); }
/* Offre (facultatif) : la carte du produit, en relief comme les portes de /bio, CTA dedans. */
.lm-offer {
  margin-top: clamp(28px, 1.5rem + 2vw, 44px);
  padding: 24px 16px 18px; border-radius: var(--w-r-bento);
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 100%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px var(--fill-4), 0 1px 2px rgba(0,0,0,.05), 0 10px 28px -8px rgba(0,0,0,.14);
  text-align: center;
}
.lm-offer__top { display: flex; justify-content: center; margin-bottom: 14px; }
.lm-offer__t { font-size: var(--w-title3); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--text); }
.lm-offer__d { max-width: 30em; margin: 8px auto 0; font-size: var(--w-callout); line-height: 1.45; color: var(--text2); }
.lm-offer__price { margin-top: 12px; font-family: var(--font-rounded); font-size: var(--w-title2); font-weight: 600; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.lm-offer__price small { font-family: var(--font); font-size: var(--w-footnote); font-weight: 600; color: var(--text3); letter-spacing: 0; margin-left: 4px; }
.lm-offer .lm-cta { margin-top: 20px; padding-left: 16px; padding-right: 16px; gap: 8px; text-wrap: balance; }
.lm-offer .rp4-door-logo { width: 52px; height: 52px; border-radius: 14px; }
/* CTA : un seul par page. Pilule d'encre, pleine largeur au pouce. Icône posée par le socle selon
   body[data-lm-product] (app : téléphone ; guide : livre ; coaching : personnes ; prozis : flèche sortante). */
.lm-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 440px;
  min-height: 56px; margin: 28px auto 0; padding: 14px 24px; border-radius: var(--r-pill);
  background: var(--cta-bg); color: var(--cta-text); text-align: center; text-decoration: none;
  font-size: var(--w-body); font-weight: 600; line-height: 1.25; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lm-cta:active { background: var(--cta-bg-pressed); transform: scale(.97); }
.lm-cta .rp4-i { width: 20px; height: 20px; flex: none; }
.lm-cta .lm-cta__go { transition: translate var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lm-cta:hover { background: var(--cta-bg-pressed); } .lm-cta:hover .lm-cta__go { translate: 3px 0; } }
.lm-close__sub { margin-top: 12px; font-size: var(--w-footnote); line-height: 1.45; color: var(--text3); text-align: center; }
/* Code promo (Prozis) : pastille à copier à la main, chasse fixe */
.lm-code { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); background: var(--fill-3); color: var(--text); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--w-footnote); font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.lm-close__ps { margin-top: clamp(40px, 2rem + 2vw, 56px); padding-top: 22px; box-shadow: inset 0 1px 0 var(--sep); font-size: var(--lm-p-size); line-height: var(--lm-p-lh); color: var(--text2); }
.lm-close__ps b { color: var(--text); }
.lm-close__legal { margin-top: 18px; font-size: var(--w-footnote); line-height: 1.45; color: var(--text3); }
.lm-close > .lm-p:first-of-type { margin-top: 0; }

/* ═══════════ 11. Pied ═══════════ */
.lm-foot {
  margin-top: clamp(56px, 3rem + 3vw, 96px);
  padding-top: 8px; padding-bottom: calc(env(safe-area-inset-bottom) + 28px);
  display: block; font-size: var(--w-footnote); line-height: 1.4; color: var(--text3); text-align: center; text-wrap: balance;
}
.lm-foot > * { margin: 0; max-width: none; }
.lm-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--text3); }
@media (hover: hover) and (pointer: fine) { .lm-foot a:hover { color: var(--text); } }

/* ═══════════ 12. Révélations à l'entrée (posées par le socle, jamais sans JS) ═══════════ */
.lm-js .lm-rv { opacity: 0; transform: translateY(14px); transition: opacity var(--w-dur-reveal) var(--ease-out), transform var(--w-dur-reveal) var(--ease-out); }
.lm-js .lm-rv.lm-in { opacity: 1; transform: none; }

/* Haptique iOS : interrupteur natif invisible, basculé dans le geste */
.lm-haptic { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; z-index: -1; }

/* ═══════════ 13. Pointeur (≥ 768) ═══════════ */
@media (min-width: 768px) {
  .lm-quiz__q { padding: 24px 20px 20px; }
  .lm-sci, .lm-key { padding: 26px 28px; }
  .lm-chart { padding: 24px 26px 22px; }
  .lm-do { padding: 20px 10px 10px; }
  .lm-offer { padding: 32px 32px 28px; }
}

/* ═══════════ 14. Mouvement réduit : états finaux (rp4.css §25 a déjà mis les durées à zéro) ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .lm-opening__seal, .lm-opening__line, .lm-opening__go, .lm-plan.is-active, .lm-quiz__result.is-shown,
  .lm-js .lm-quiz--on .lm-quiz__q.is-locked .lm-quiz__why { animation: none !important; opacity: 1 !important; transform: none !important; }
  .lm-js .lm-rv { opacity: 1; transform: none; }
  .lm-js .lm-chart--anim .lm-chart__fill { transform: scaleX(1); }
  .lm-js .lm-chart--anim .lm-chart__col { transform: scaleY(1); }
  .lm-js .lm-chart--anim .lm-chart__cell { transform: none; opacity: 1; }
  .lm-js .lm-chart--anim .lm-chart__path { stroke-dashoffset: 0; }
  .lm-js .lm-chart--anim .lm-chart__dot { opacity: 1; }
  .lm-js .lm-chart--anim .lm-chart__area { opacity: .12; }
  .lm-toc__bar { animation: none; display: none; }
  .lm-do__list input[type="checkbox"]:active, .lm-quiz__a:active, .lm-cta:active, .lm-btn:active, .lm-leak:active, .lm-toc__a:active { transform: none; }
}

/* Mention de collaboration commerciale placée en tête (sous la méta), avant le premier lien affilié (loi 2023-451). */
.lm-legal--top { margin: 6px 0 0; text-align: center; }