/* =============================================================
   REBOOT PLAN — LECTEUR DE GUIDES (feuille mutualisée)
   =============================================================

   Sert les 4 `_content.html` de /guides/*. Fichier servi HORS
   middleware, donc cacheable longtemps par le CDN : tout ce qui
   entre ici sort du payload `no-store` des guides.

   Contenu :
     0 · Inter auto-hébergée (1 fichier variable, latin)
     1 · Reset (absorbé de base.css, SANS son @import Google Fonts)
     2 · Variables du lecteur (DA rp4, clair + sombre automatique)
     3 · Gabarit éditorial partagé  .rp-fond-*
     4 · Couche lecteur             .rp-r-*
     5 · prefers-reduced-motion

   ⚠️ Les guides ne chargent PAS base.css : son `@import` Google Fonts
   ré-importerait la police depuis fonts.gstatic.com et annulerait
   l'auto-hébergement. base.css reste intact pour le reste du site,
   qui consomme les graisses 300 → 900.

   ⚠️ Le contrat de balisage attendu par js/guide-reader.js est
   documenté dans `guides/_reader-contract.md`. Le lire avant de
   toucher au markup d'un guide.
   ============================================================= */


/* =============================================================
   0 · POLICE AUTO-HÉBERGÉE
   Inter latin, fichier VARIABLE (fvar/gvar/avar/HVAR/STAT présents,
   récupéré depuis fonts.gstatic.com v20) : un seul woff2 de 48 Ko
   couvre l'axe wght 100 → 900. Déclarer la plage complète est ce qui
   évite toute dérive de rendu (les guides utilisent 400/500/600/700/800).
   ============================================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =============================================================
   1 · RESET
   Reprise du reset de css/base.css, sans l'@import de police et sans
   les styles de placeholders média (jamais utilisés dans les guides).
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6,
p, blockquote, figure, ul, ol, dl, dd, form { margin: 0; }

ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(0, 122, 255, 0.22); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--rp-r-focus);
  outline-offset: 3px;
  border-radius: var(--rp-radius-xs);
}


/* =============================================================
   2 · VARIABLES DU LECTEUR (DA rp4, refonte du 02/10/2026)
   Les guides chargent encore css/tokens.css (ancienne charte noir et
   or) : ce bloc, chargé APRÈS, réécrit chacune de ses variables avec
   les valeurs de css/rp4.css (copiées, pas importées : les pages de
   guides gatées ne chargent pas rp4.css). Une marque = un clair :
   fin de l'ivoire chaud et du noir et or.

   Thème : clair par défaut, sombre automatique (prefers-color-scheme).
   Le lecteur peut forcer l'un ou l'autre : <html data-rp-theme="light">
   ou <html data-rp-theme="dark"> (réglage « Clair / Sombre / Auto »,
   persistant dans rp_reader_prefs). Sans attribut = automatique.

   Sens des variables historiques (on ne les renomme pas : les
   _content.html des guides s'en servent dans leur <style>) :
     --rp-noir        fond de page        (#F2F2F7 / #000000)
     --rp-noir-soft   surface, carte      (#FFFFFF / #1C1C1E)
     --rp-noir-elev   surface en retrait  (#F7F7FA / #2C2C2E)
     --rp-or          TEXTE doré          (= --gold-text de rp4)
     --rp-r-gold      or en REMPLISSAGE   (#C9A84C, jamais du texte)
     --rp-text-main / -mute / -dim        encres rp4 (text, text3)
   ============================================================= */
:root {
  color-scheme: light dark;
  /* Seule variable que ce fichier empruntait à tokens.css : la porter ici rend tokens.css inutile
     aux guides (à retirer de leurs _content.html, cf. _partials/CONTRAT.md, reste à faire). */
  --rp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* la-reserve/_content.html */

  /* Échelle des titres : VALEURS de rp4.css (--w-hero, --w-title1…), copiées
     parce que les pages du lecteur ne chargent pas rp4.css. Une seule échelle
     sur tout le site : un titre de leçon a la taille d'un titre de section. */
  --rp-w-hero:   clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem);
  --rp-w-title1: clamp(1.75rem, 1.35rem + 1.9vw, 3rem);
  --rp-w-title2: clamp(1.375rem, 1.2rem + .8vw, 2rem);
  --rp-w-lead:   clamp(1.0625rem, .95rem + .6vw, 1.5rem);
  --rp-w-stat:   clamp(3.5rem, 2.4rem + 4vw, 6rem);
  --rp-w-eyebrow: .8125rem;
  --rp-font-rounded: ui-rounded, var(--rp-font-display);

  /* Réglages de lecture (D3). Écrits sur <html> par le lecteur. */
  --rp-reader-scale: 1;
  --rp-r-bar-h: 44px;
  --rp-r-gutter: 20px;
  --rp-r-read-w: 680px;           /* = --w-read de rp4 */

  /* Typo : pile système sur Apple, Inter ailleurs (rp4). Plus de Georgia,
     plus de mono : tout en pile système. */
  --rp-font-display: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --rp-font-body:    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --rp-font-serif:   -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --rp-font-mono:    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --rp-font-serif-display: var(--rp-font-display);
  --rp-fs-body: 17px;
  --rp-fw-body: 400;
  --rp-lh-loose: 1.6;
  --rp-ls-body: 0;
  --rp-radius-xs: 8px;
  --rp-radius-sm: 12px;
  --rp-radius-md: 20px;
  --rp-radius-lg: 28px;

  /* Surfaces et encres (rp4 clair) */
  --rp-noir:      #F2F2F7;
  --rp-noir-soft: #FFFFFF;
  --rp-noir-elev: #F7F7FA;
  --rp-text-main: #1D1D1F;
  --rp-text-mute: #6E6E73;
  --rp-text-dim:  #6E6E73;
  --rp-text-faint:#AEAEB2;        /* décoratif uniquement */
  --rp-border-faint: rgba(60, 60, 67, 0.12);
  --rp-border-soft:  rgba(60, 60, 67, 0.22);
  --rp-border-or:    rgba(201, 168, 76, 0.55);
  --rp-border-or-strong: rgba(201, 168, 76, 0.80);

  /* Or : texte doré (--gold-text) et remplissage (--gold) */
  --rp-or:      #8B6914;
  --rp-or-dark: #8B6914;
  --rp-or-soft: #1D1D1F;          /* ancien « texte sur or » : l'encre */
  --rp-r-gold:  #C9A84C;
  --rp-r-on-gold: #1D1D1F;

  /* Encre d'action (CTA à l'encre, comme l'app) */
  --rp-r-cta-bg: #1D1D1F;
  --rp-r-cta-text: #FFFFFF;
  --rp-r-cta-pressed: #3A3A3C;
  --rp-r-link: #0067D6;
  --rp-r-focus: #007AFF;

  /* Couleurs de données (schémas, quiz) : celles de l'app */
  --rp-bordeaux-light: #C4281E;   /* = --danger-text (flèches de boucle, erreurs) */
  --rp-r-ok: #1F7A32;
  --rp-r-danger: #C4281E;

  /* Verre de la barre du lecteur (recette rp4) */
  --rp-r-bar-bg:        rgba(255, 255, 255, 0.72);
  /* 14 px et non 32 : un flou d'arrière-plan sur une barre FIXE se recalcule à
     chaque image du défilement, et son coût croît avec le rayon. À 32 px,
     Safari iOS saccadait (retour de Paul, 02/10/2026). */
  --rp-r-glass-blur:    saturate(180%) blur(14px);

  --rp-r-surface-hover: rgba(116, 116, 128, 0.08);
  --rp-r-surface-focus: #FFFFFF;
  --rp-r-or-hover:      #3A3A3C;
  --rp-r-or-a06:        rgba(201, 168, 76, 0.10);
  --rp-r-or-a10:        rgba(201, 168, 76, 0.14);
  --rp-r-or-a18:        rgba(201, 168, 76, 0.30);
  --rp-r-or-a35:        rgba(201, 168, 76, 0.45);
  --rp-r-or-a40:        rgba(139, 105, 20, 0.40);
  --rp-r-or-glow:       transparent;
  --rp-r-track:         rgba(120, 120, 128, 0.16);
  --rp-r-track-soft:    rgba(118, 118, 128, 0.12);
  --rp-r-scrim:         rgba(0, 0, 0, 0.28);
  --rp-r-sheet-shadow:  0 -8px 40px rgba(0, 0, 0, 0.14);
  --rp-r-cta-shadow:       none;
  --rp-r-cta-shadow-hover: none;
  --rp-shadow-soft: none;
  --rp-shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.10);
  --rp-shadow-or: none;
}

/* Sombre : automatique, sauf si le lecteur a forcé le clair. Mêmes valeurs
   que le sombre de rp4.css. Le bloc est dupliqué pour le forçage. */
@media (prefers-color-scheme: dark) {
  :root:not([data-rp-theme="light"]) {
    color-scheme: dark;
    --rp-noir:      #000000;
    --rp-noir-soft: #1C1C1E;
    --rp-noir-elev: #2C2C2E;
    --rp-text-main: #F2F2F7;
    --rp-text-mute: #A1A1A6;
    --rp-text-dim:  #A1A1A6;
    --rp-text-faint:#636366;
    --rp-border-faint: rgba(84, 84, 88, 0.48);
    --rp-border-soft:  rgba(84, 84, 88, 0.80);
    --rp-border-or:    rgba(232, 199, 108, 0.45);
    --rp-border-or-strong: rgba(232, 199, 108, 0.70);
    --rp-or:      #E8C76C;
    --rp-or-dark: #E8C76C;
    --rp-or-soft: #F2F2F7;
    --rp-r-cta-bg: #F2F2F7;
    --rp-r-cta-text: #1D1D1F;
    --rp-r-cta-pressed: #D1D1D6;
    --rp-r-link: #5AA9FF;
    --rp-r-focus: #0A84FF;
    --rp-bordeaux-light: #FF6B61;
    --rp-r-ok: #5CD67A;
    --rp-r-danger: #FF6B61;
    --rp-r-bar-bg:        rgba(28, 28, 30, 0.72);
    --rp-r-surface-hover: rgba(116, 116, 128, 0.18);
    --rp-r-surface-focus: #1C1C1E;
    --rp-r-or-hover:      #D1D1D6;
    --rp-r-or-a06:        rgba(201, 168, 76, 0.12);
    --rp-r-or-a10:        rgba(201, 168, 76, 0.16);
    --rp-r-or-a18:        rgba(201, 168, 76, 0.30);
    --rp-r-or-a35:        rgba(232, 199, 108, 0.40);
    --rp-r-or-a40:        rgba(232, 199, 108, 0.45);
    --rp-r-track:         rgba(120, 120, 128, 0.32);
    --rp-r-track-soft:    rgba(118, 118, 128, 0.24);
    --rp-r-scrim:         rgba(0, 0, 0, 0.5);
    --rp-r-sheet-shadow:  0 -8px 40px rgba(0, 0, 0, 0.6);
    --rp-shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}
:root[data-rp-theme="dark"] {
  color-scheme: dark;
  --rp-noir:      #000000;
  --rp-noir-soft: #1C1C1E;
  --rp-noir-elev: #2C2C2E;
  --rp-text-main: #F2F2F7;
  --rp-text-mute: #A1A1A6;
  --rp-text-dim:  #A1A1A6;
  --rp-text-faint:#636366;
  --rp-border-faint: rgba(84, 84, 88, 0.48);
  --rp-border-soft:  rgba(84, 84, 88, 0.80);
  --rp-border-or:    rgba(232, 199, 108, 0.45);
  --rp-border-or-strong: rgba(232, 199, 108, 0.70);
  --rp-or:      #E8C76C;
  --rp-or-dark: #E8C76C;
  --rp-or-soft: #F2F2F7;
  --rp-r-cta-bg: #F2F2F7;
  --rp-r-cta-text: #1D1D1F;
  --rp-r-cta-pressed: #D1D1D6;
  --rp-r-link: #5AA9FF;
  --rp-r-focus: #0A84FF;
  --rp-bordeaux-light: #FF6B61;
  --rp-r-ok: #5CD67A;
  --rp-r-danger: #FF6B61;
  --rp-r-bar-bg:        rgba(28, 28, 30, 0.72);
  --rp-r-surface-hover: rgba(116, 116, 128, 0.18);
  --rp-r-surface-focus: #1C1C1E;
  --rp-r-or-hover:      #D1D1D6;
  --rp-r-or-a06:        rgba(201, 168, 76, 0.12);
  --rp-r-or-a10:        rgba(201, 168, 76, 0.16);
  --rp-r-or-a18:        rgba(201, 168, 76, 0.30);
  --rp-r-or-a35:        rgba(232, 199, 108, 0.40);
  --rp-r-or-a40:        rgba(232, 199, 108, 0.45);
  --rp-r-track:         rgba(120, 120, 128, 0.32);
  --rp-r-track-soft:    rgba(118, 118, 128, 0.24);
  --rp-r-scrim:         rgba(0, 0, 0, 0.5);
  --rp-r-sheet-shadow:  0 -8px 40px rgba(0, 0, 0, 0.6);
  --rp-shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.5);
}


/* =============================================================
   3 · GABARIT ÉDITORIAL PARTAGÉ  .rp-fond-*
   Long format premium, fond noir, accents or.
   Le préfixe historique `.rp-fond-` est conservé (les 4 guides sont
   nés du template « Les Fondations ») : le renommer casserait le JS
   et 4 fichiers de markup pour zéro gain.
   ============================================================= */

body {
  min-height: 100vh;
  min-height: 100svh;   /* Safari iOS : 100vh = viewport chrome RÉTRACTÉ, donc trop haut */
  background: var(--rp-noir);
  color: var(--rp-text-main);
  font-family: var(--rp-font-body);
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-body);
  line-height: var(--rp-lh-loose);
  letter-spacing: var(--rp-ls-body);
  overflow-x: hidden;
}

.rp-fond-wrap { display: block; }

/* === Fade-in au scroll ======================================
   PROGRESSIVE ENHANCEMENT : `.rp-fond-fade` est un simple MARQUEUR,
   sans effet visuel. C'est le JS qui pose `.rp-r-armed` juste avant
   d'observer l'élément. Sans JS, tout le contenu est visible.
   ============================================================ */
.rp-r-armed {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--rp-ease), transform 500ms var(--rp-ease);
}
.rp-r-armed.is-in { opacity: 1; transform: translateY(0); }

/* === Barre de progression de lecture ========================= */
.rp-guide-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: var(--rp-r-or-a10);
}
.rp-guide-progress span {
  display: block;
  height: 100%;
  background: var(--rp-r-gold);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
/* Quand la barre de sommeil est visible, la ligne se cale sous elle. */
html.rp-r-bar-shown .rp-guide-progress {
  top: calc(var(--rp-r-bar-h) + env(safe-area-inset-top, 0px));
}

/* === Statement d'ouverture ================================== */
.rp-fond-opening {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--rp-r-gutter);
  padding-left: max(var(--rp-r-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rp-r-gutter), env(safe-area-inset-right, 0px));
  position: relative;
}
.rp-fond-opening__inner { max-width: var(--rp-r-read-w); width: 100%; }
.rp-fond-opening p {
  font-family: var(--rp-font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.015em;
  line-height: 1.45;
  color: var(--rp-text-main);
  margin: 0 0 28px 0;
  opacity: 0;
  transform: translateY(12px);
  animation: rp-fond-opening-in 1100ms var(--rp-ease) forwards;
}
.rp-fond-opening p:nth-of-type(1) { animation-delay: 200ms; }
.rp-fond-opening p:nth-of-type(2) { animation-delay: 900ms; }
.rp-fond-opening p:nth-of-type(3) { animation-delay: 1600ms; }
.rp-fond-opening p:nth-of-type(4) { animation-delay: 2300ms; }
.rp-fond-opening p:nth-of-type(2) {
  color: var(--rp-text-mute);
  font-size: clamp(17px, 1.9vw, 22px);
}
@keyframes rp-fond-opening-in {
  to { opacity: 1; transform: translateY(0); }
}
/* Surtitre « Formation gratuite · … » / « Cadeau · … » en tête d'ouverture :
   le surtitre de rp4 (.rp4-eyebrow), gris, sans cadre, sans point, sans filet. */
.rp-fond-opening__seal {
  display: block;
  font-family: var(--rp-font-body);
  font-size: var(--rp-w-eyebrow);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-mute);
  margin: 0 0 24px 0;
  opacity: 0;
  animation: rp-fond-opening-in 1100ms var(--rp-ease) 100ms forwards;
}
/* Ancien filet or vertical « fais défiler » : retiré (motif de l'ancienne DA).
   L'élément reste dans le balisage des guides, il n'est plus rendu. */
.rp-fond-scroll-hint { display: none; }
/* D5 · Ouverture allégée : dès la 2e ouverture du guide, entrée directe.
   Le lecteur pose `html.rp-r-direct` (flag localStorage). */
html.rp-r-direct .rp-fond-opening p,
html.rp-r-direct .rp-fond-opening__seal {
  animation: none;
  opacity: 1;
  transform: none;
}

/* === Section partie ========================================= */
.rp-fond-part {
  padding: clamp(72px, 4rem + 6vw, 160px) 0 clamp(48px, 3rem + 3vw, 112px);
  position: relative;
}
.rp-fond-part + .rp-fond-part { border-top: 1px solid var(--rp-border-faint); }

.rp-fond-part__head {
  max-width: var(--rp-r-read-w);
  margin: 0 auto clamp(32px, 4vw, 64px);
  padding: 0 var(--rp-r-gutter);
  padding-left: max(var(--rp-r-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rp-r-gutter), env(safe-area-inset-right, 0px));
}
/* Numéro de chapitre : plus de « 01 » géant en or. Un surtitre gris, comme
   partout sur le site, qui dit ce que c'est : « Leçon 01 » dans une formation,
   « Chapitre 01 » dans un guide (le mot est posé ci-dessous par la page). */
.rp-fond-part__num {
  display: block;
  font-family: var(--rp-font-body);
  font-size: var(--rp-w-eyebrow);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--rp-text-mute);
  margin: 0 0 12px;
}
body[data-page^="lm-"] .rp-fond-part__num::before { content: "Leçon "; }
body[data-page^="guide-"] .rp-fond-part__num::before { content: "Chapitre "; }
/* Titre de chapitre = titre de section rp4 (.rp4-sh h2 : --w-title1, 700). */
.rp-fond-part__title {
  font-family: var(--rp-font-display);
  font-weight: 700;
  font-size: var(--rp-w-title1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rp-text-main);
  margin: 0 0 12px;
  text-wrap: balance;
}
/* Chapeau = .rp4-lead. */
.rp-fond-part__sub {
  font-family: var(--rp-font-body);
  font-style: normal;
  font-size: calc(var(--rp-w-lead) * var(--rp-reader-scale));
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--rp-text-mute);
  margin: 0;
  max-width: 34em;
  text-wrap: pretty;
}

/* Titre éditorial du guide : un seul <h1>, hors chapitre.
   Remplace les `style="…"` inline qui traînaient sur les sections de titre
   de La Réserve et de L'Harmonie. */
.rp-fond-title {
  padding-top: clamp(40px, 8vh, 80px);
  padding-bottom: clamp(20px, 5vh, 60px);
  border: none;
}
.rp-fond-title .rp-fond-part__head { text-align: center; margin-bottom: 0; }
.rp-fond-title .rp-fond-part__head { max-width: 880px; }
/* Titre long (plus de 50 signes) : au pouce, un cran plus petit pour tenir en
   deux lignes à 390 px (règle de Paul), sans réécrire le titre. */
@media (max-width: 767px) {
  .rp-fond-part__title--long { font-size: var(--rp-w-title2); letter-spacing: -0.015em; }
}
/* Le Démarrage : son <style> pose un h1 à 104 px ; on le ramène au h1 du site. */
.rp-fond-part.rp-fond-hero .rp-fond-hero__title {
  font-size: var(--rp-w-hero);
  line-height: 1.04;
  letter-spacing: -0.028em;
}
/* Le seul <h1> du guide = h1 de hero rp4 (--w-hero, 700, -0,028em). */
.rp-fond-title .rp-fond-part__title {
  font-size: var(--rp-w-hero);
  line-height: 1.04;
  letter-spacing: -0.028em;
  max-width: 14em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
}
.rp-fond-title .rp-fond-part__sub { margin: 0 auto; max-width: 30em; }
.rp-fond-title .rp-r-meta { text-align: center; margin-top: 18px; }

/* Sous-sections éditoriales */
.rp-fond-block {
  max-width: var(--rp-r-read-w);
  margin: 0 auto clamp(48px, 7vh, 80px);
  padding: 0 var(--rp-r-gutter);
  padding-left: max(var(--rp-r-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rp-r-gutter), env(safe-area-inset-right, 0px));
}
/* `__eyebrow` est un <h3> (arbre de headings réel) mais garde le rendu
   d'un label mono : on neutralise donc les défauts du heading. */
.rp-fond-block__eyebrow {
  display: block;
  font-family: var(--rp-font-body);
  font-size: var(--rp-w-eyebrow);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-or);
  margin: 0 0 22px;
  padding-bottom: 10px;
  position: relative;
}
.rp-fond-block__eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 1px;
  background: var(--rp-r-gold);
}
.rp-fond-block p {
  font-family: var(--rp-font-body);
  font-size: calc(18px * var(--rp-reader-scale));
  line-height: 1.75;
  color: var(--rp-text-main);
  margin: 0 0 22px;
  letter-spacing: 0.005em;
}
.rp-fond-block p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .rp-fond-block p { font-size: calc(16.5px * var(--rp-reader-scale)); line-height: 1.72; }
}

/* === Stat callout (chiffres animés) ========================= */
.rp-fond-stat {
  margin: 48px auto;
  max-width: var(--rp-r-read-w);
  padding: 0 var(--rp-r-gutter);
  text-align: center;
  position: relative;
}
.rp-fond-stat__inner {
  display: inline-block;
  position: relative;
  padding: 16px 28px;
}
/* Grand chiffre = .rp4-tile-stat (arrondi, 600, à l'encre). Plus de tirets
   or de part et d'autre : l'or reste un remplissage. */
.rp-fond-stat__num {
  font-family: var(--rp-font-rounded);
  font-weight: 600;
  font-size: var(--rp-w-stat);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--rp-text-main);
  display: inline-block;
  white-space: nowrap;
}
.rp-fond-stat__num .unit {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 6px;
  color: var(--rp-text-mute);
}
.rp-fond-stat__num .prefix {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--rp-text-mute);
  margin-right: 4px;
}

/* === Schéma « boucle » (Fondations : stress · La Réserve : insuline) =====
   État AU REPOS = état FINAL (lisible sans JS). Le lecteur pose
   `.rp-r-anim` pour armer l'animation, puis `.is-in` pour la jouer.
   ======================================================================== */
.rp-fond-loop {
  margin: 56px auto;
  max-width: 540px;
  padding: 0 var(--rp-r-gutter);
}
.rp-fond-loop svg { width: 100%; height: auto; display: block; overflow: visible; }
.rp-fond-loop__node {
  font-family: var(--rp-font-mono);
  font-size: 11px;   /* repère du viewBox : ne pas grossir (cf. contrat §9) */
  font-weight: 500;
  /* 0.06em et pas 0.12 : ces `font-size`/`letter-spacing` s'appliquent dans
     le repère du viewBox, pas en pixels écran. À 0.12em, « du lendemain »
     mesurait 95,3 unités pour un cercle de 92 (r=46) et débordait du tracé
     — visible surtout sur iPhone, où le schéma est réduit à ~0,7×. */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--rp-text-main);
}
.rp-fond-loop__circle {
  fill: var(--rp-noir-soft);
  stroke: var(--rp-r-gold);
  stroke-width: 1;
}
.rp-fond-loop__arrow {
  fill: none;
  stroke: var(--rp-bordeaux-light);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.rp-fond-loop__arrow-head { fill: var(--rp-bordeaux-light); }

.rp-fond-loop.rp-r-anim .rp-fond-loop__circle {
  opacity: 0;
  transition: opacity 600ms var(--rp-ease);
}
.rp-fond-loop.rp-r-anim .rp-fond-loop__arrow {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1400ms var(--rp-ease);
}
.rp-fond-loop.rp-r-anim .rp-fond-loop__arrow-head {
  opacity: 0;
  transition: opacity 400ms var(--rp-ease);
}
.rp-fond-loop.rp-r-anim.is-in .rp-fond-loop__circle { opacity: 1; }
.rp-fond-loop.rp-r-anim.is-in .rp-fond-loop__circle:nth-of-type(1) { transition-delay: 0ms; }
.rp-fond-loop.rp-r-anim.is-in .rp-fond-loop__circle:nth-of-type(2) { transition-delay: 300ms; }
.rp-fond-loop.rp-r-anim.is-in .rp-fond-loop__circle:nth-of-type(3) { transition-delay: 600ms; }
.rp-fond-loop.rp-r-anim.is-in .rp-fond-loop__circle:nth-of-type(4) { transition-delay: 900ms; }
.rp-fond-loop.rp-r-anim.is-in .rp-fond-loop__arrow { stroke-dashoffset: 0; transition-delay: 1100ms; }
.rp-fond-loop.rp-r-anim.is-in .rp-fond-loop__arrow-head { opacity: 1; transition-delay: 2400ms; }


/* =============================================================
   BILAN / MODULE INTERACTIF (Fondations, La Réserve, L'Harmonie,
   Le Démarrage pour la partie `.rp-fond-answer`)
   ============================================================= */
.rp-fond-bilan {
  padding: clamp(72px, 4rem + 6vw, 160px) 0;
  border-top: 1px solid var(--rp-border-faint);
  position: relative;
}
.rp-fond-bilan__intro {
  max-width: var(--rp-r-read-w);
  margin: 0 auto clamp(48px, 8vh, 80px);
  padding: 0 var(--rp-r-gutter);
  text-align: center;
}
.rp-fond-bilan__eyebrow {
  display: block;
  font-family: var(--rp-font-body);
  font-size: var(--rp-w-eyebrow);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-mute);
  margin: 0 0 12px;
}
.rp-fond-bilan__title {
  font-family: var(--rp-font-display);
  font-weight: 700;
  font-size: var(--rp-w-title1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rp-text-main);
  margin: 0 0 12px;
  text-wrap: balance;
}
.rp-fond-bilan__hint {
  font-family: var(--rp-font-body);
  font-style: normal;
  font-size: var(--rp-w-lead);
  letter-spacing: -0.005em;
  color: var(--rp-text-mute);
  max-width: 30em;
  margin: 0 auto;
  line-height: 1.4;
  text-wrap: pretty;
}

.rp-fond-quiz {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--rp-r-gutter);
  position: relative;
}
.rp-fond-quiz__progress {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  margin-bottom: 40px;
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-dim);
}
.rp-fond-quiz__progress-track {
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: var(--rp-r-track);
  position: relative;
  overflow: hidden;
}
.rp-fond-quiz__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--rp-r-gold);
  transition: width 500ms var(--rp-ease);
}
.rp-fond-quiz__back {
  position: absolute;
  top: 0;
  left: var(--rp-r-gutter);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-mute);
  background: transparent;
  border: 1px solid var(--rp-border-faint);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
  opacity: 0;
  pointer-events: none;
}
.rp-fond-quiz__back.is-active { opacity: 1; pointer-events: auto; }
.rp-fond-quiz__back svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }

.rp-fond-quiz__stage { position: relative; min-height: 480px; }
.rp-fond-quiz__step {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--rp-ease), transform 500ms var(--rp-ease);
  pointer-events: none;
}
.rp-fond-quiz__step.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}
.rp-fond-quiz__question {
  font-family: var(--rp-font-display);
  font-weight: 600;
  font-size: var(--rp-w-title2);
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--rp-text-main);
  max-width: 26em;
  margin: 0 auto 40px;
  text-align: center;
}
.rp-fond-quiz__answers {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .rp-fond-quiz__answers { grid-template-columns: 1fr 1fr; gap: 18px; }
}

.rp-fond-answer {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--rp-noir-soft);
  border: 1px solid var(--rp-border-faint);
  border-radius: 14px;
  padding: 22px 22px 20px;
  cursor: pointer;
  color: var(--rp-text-main);
  transition: border-color 300ms var(--rp-ease),
              background 300ms var(--rp-ease),
              transform 300ms var(--rp-ease);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* L'ancien filet or qui se déroulait en haut de la carte est retiré : la
   carte sélectionnée se lit à sa bordure, comme les cartes de rp4. */
.rp-fond-answer::before { content: none; }
@media (hover: hover) {
  .rp-fond-answer:hover {
    border-color: var(--rp-border-or);
    background: var(--rp-r-surface-hover);
    transform: translateY(-2px);
  }
  .rp-fond-answer:hover::before { width: 100%; }
  .rp-fond-quiz__back:hover { color: var(--rp-or); border-color: var(--rp-border-or); }
}
.rp-fond-answer:active { transform: translateY(0); }
.rp-fond-answer.is-selected {
  border-color: var(--rp-or);
  background: var(--rp-r-or-a06);
}
.rp-fond-answer.is-selected::before { width: 100%; }

.rp-fond-answer__gauge {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--rp-r-track);
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}
.rp-fond-answer__gauge::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--gauge, 0%);
  background: var(--rp-r-gold);
  border-radius: inherit;
  transition: width 400ms var(--rp-ease);
}
.rp-fond-answer__text {
  font-family: var(--rp-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--rp-text-main);
  letter-spacing: 0.005em;
  margin: 0;
}
@media (max-width: 480px) {
  .rp-fond-answer { padding: 18px 18px 16px; }
  .rp-fond-answer__text { font-size: 15.5px; }
}

/* Écran résultat */
.rp-fond-quiz__result {
  display: none;
  text-align: center;
  max-width: var(--rp-r-read-w);
  margin: 0 auto;
  padding: 20px 0 0;
}
.rp-fond-quiz__result.is-active { display: block; }

.rp-fond-score-ring {
  position: relative;
  width: clamp(220px, 32vw, 280px);
  height: clamp(220px, 32vw, 280px);
  margin: 0 auto 40px;
}
.rp-fond-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rp-fond-score-ring__bg { fill: none; stroke: var(--rp-r-track-soft); stroke-width: 4; }
.rp-fond-score-ring__fill {
  fill: none;
  stroke: var(--rp-r-gold);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1600ms var(--rp-ease);
}
.rp-fond-score-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.rp-fond-score-ring__num {
  font-family: var(--rp-font-rounded);
  font-weight: 600;
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
  line-height: 1;
  color: var(--rp-text-main);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rp-fond-score-ring__label {
  font-family: var(--rp-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--rp-text-mute);
}

.rp-fond-result__title {
  font-family: var(--rp-font-display);
  font-weight: 700;
  font-size: var(--rp-w-title2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--rp-text-main);
  margin: 0 0 24px;
}
.rp-fond-result__text {
  font-size: calc(17px * var(--rp-reader-scale));
  line-height: 1.7;
  color: var(--rp-text-main);
  max-width: 36em;
  margin: 0 auto 32px;
}
.rp-fond-result__leaks {
  background: var(--rp-noir-soft);
  border: 1px solid var(--rp-border-faint);
  border-left: 3px solid var(--rp-or);
  border-radius: 12px;
  padding: 22px 24px;
  max-width: 36em;
  margin: 0 auto;
  text-align: left;
}
.rp-fond-result__leaks-label {
  font-family: var(--rp-font-body);
  font-size: var(--rp-w-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-or);
  margin: 0 0 10px;
}
.rp-fond-result__leaks-text {
  font-size: calc(16px * var(--rp-reader-scale));
  line-height: 1.6;
  color: var(--rp-text-main);
  margin: 0;
}
.rp-fond-result__leaks-text strong { color: var(--rp-or); font-weight: 600; }

.rp-fond-quiz__restart {
  margin-top: 36px;
  background: transparent;
  border: 1px solid var(--rp-border-faint);
  color: var(--rp-text-mute);
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.rp-fond-result__saved {
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-dim);
  margin: 18px 0 0 0;
}
.rp-fond-result__next {
  display: inline-block;
  margin-top: 26px;
  font-size: 14px;
  color: var(--rp-or);
  text-decoration: none;
  border-bottom: 1px solid var(--rp-r-or-a40);
  padding-bottom: 3px;
  transition: border-color 200ms ease, color 200ms ease;
}
@media (hover: hover) {
  .rp-fond-quiz__restart:hover { color: var(--rp-or); border-color: var(--rp-border-or); }
  .rp-fond-result__next:hover { color: var(--rp-or-soft); border-color: var(--rp-or); }
}


/* =============================================================
   CLÔTURE
   ============================================================= */
.rp-fond-close {
  padding: clamp(72px, 4rem + 6vw, 160px) 0 clamp(64px, 3rem + 5vw, 140px);
  border-top: 1px solid var(--rp-border-faint);
  text-align: center;
}
.rp-fond-close__title {
  font-family: var(--rp-font-display);
  font-weight: 700;
  font-size: var(--rp-w-title1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rp-text-main);
  margin: 0 auto clamp(32px, 4vw, 48px);
  padding: 0 var(--rp-r-gutter);
  max-width: var(--rp-r-read-w);
  text-wrap: balance;
}
.rp-fond-close__body {
  max-width: var(--rp-r-read-w);
  margin: 0 auto;
  padding: 0 var(--rp-r-gutter);
  padding-left: max(var(--rp-r-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rp-r-gutter), env(safe-area-inset-right, 0px));
}
.rp-fond-close__body p {
  font-size: calc(18px * var(--rp-reader-scale));
  line-height: 1.75;
  color: var(--rp-text-main);
  text-align: left;
  margin: 0 0 22px;
}
.rp-fond-close__quote {
  margin: 56px auto 48px;
  font-family: var(--rp-font-serif);
  font-style: normal;
  font-size: var(--rp-w-title2);
  text-wrap: balance;
  line-height: 1.45;
  color: var(--rp-or);
  max-width: 24em;
  text-align: center;
}
.rp-fond-close__quote-author {
  font-family: var(--rp-font-body);
  font-size: var(--rp-w-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-mute);
  text-align: center;
  margin: -24px 0 48px 0;
}
.rp-fond-close__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 18px 36px;
  font-family: var(--rp-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rp-noir);
  background: var(--rp-r-gold);
  border: 1px solid var(--rp-or);
  border-radius: 10px;
  box-shadow: var(--rp-r-cta-shadow);
  transition: transform 250ms var(--rp-ease), box-shadow 250ms var(--rp-ease), background 200ms;
}
.rp-fond-close__cta:active { transform: translateY(0); }
@media (hover: hover) {
  .rp-fond-close__cta:hover {
    background: var(--rp-r-or-hover);
    transform: translateY(-1px);
    box-shadow: var(--rp-r-cta-shadow-hover);
  }
}

/* Fin de lecture, aucun lien sortant */
.rp-fond-close__end { max-width: 34em; margin: 8px auto 0; }
.rp-fond-close__body .rp-fond-close__end-title {
  font-family: var(--rp-font-display);
  font-weight: 700;
  font-size: var(--rp-w-title2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--rp-text-main);
  text-align: center;
  margin: 0 0 12px;
  text-wrap: balance;
}
.rp-fond-close__body .rp-fond-close__end-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--rp-text-mute);
  text-align: center;
  margin: 0;
}
.rp-fond-close__foot {
  margin-top: 88px;
  padding-top: 32px;
  border-top: 1px solid var(--rp-border-faint);
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-dim);
}

/* Utilitaire lecteur d'écran */
.rp-fond-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* =============================================================
   4 · COUCHE LECTEUR  .rp-r-*
   Tout ce bloc est INERTE sans JS : aucun élément `.rp-r-bar`,
   `.rp-r-sheet` ou `.rp-r-resume` n'existe dans le HTML servi, ils
   sont construits par js/guide-reader.js.
   ============================================================= */

/* Les ancres de chapitre ne doivent pas se caler SOUS la barre haute. */
.rp-r-chapter {
  scroll-margin-top: calc(var(--rp-r-bar-h) + env(safe-area-inset-top, 0px) + 10px);
}

.rp-r-sheet__body { max-width: 640px; margin: 0 auto; }

/* --- Ligne de méta sous le titre du guide (X min · Y chapitres) --- */
.rp-r-meta {
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-dim);
  margin: 6px 0 0;
}

/* --- Barre haute collante ---------------------------------------- */
.rp-r-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  height: calc(var(--rp-r-bar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  /* Au pointeur, boutons calés sur la largeur du site (1200 px) et non sur
     les bords de l'écran. */
  padding-left: max(6px, env(safe-area-inset-left, 0px), calc((100% - 1200px) / 2));
  padding-right: max(6px, env(safe-area-inset-right, 0px), calc((100% - 1200px) / 2));
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--rp-r-bar-bg);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rp-border-faint);
  transform: translateY(-102%);
  transition: transform 320ms var(--rp-ease);
}
.rp-r-bar.is-visible { transform: none; }

.rp-r-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* 44px pleins : la barre fait 44px, les boutons la remplissent.
     Une cible de 40px passe sous le minimum tactile iOS. */
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-or);
  background: transparent;
  border: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 200ms, color 200ms;
}
.rp-r-bar__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rp-r-bar__btn--aa { font-size: 13px; letter-spacing: 0; font-family: var(--rp-font-display); font-weight: 700; }
.rp-r-bar__state {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) {
  .rp-r-bar__btn:hover { border-color: var(--rp-border-or); }
}
@media (max-width: 360px) {
  .rp-r-bar__btn--toc span { display: none; }
}

/* --- Feuilles (sommaire plein écran, références, réglages) -------- */
.rp-r-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  pointer-events: none;
}
.rp-r-sheet.is-open { visibility: visible; pointer-events: auto; }
.rp-r-sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--rp-r-scrim);
  opacity: 0;
  transition: opacity 280ms var(--rp-ease);
}
.rp-r-sheet.is-open .rp-r-sheet__scrim { opacity: 1; }
.rp-r-sheet__panel {
  position: absolute;
  background: var(--rp-noir);
  transition: transform 320ms var(--rp-ease);
  overscroll-behavior: contain;
}
.rp-r-sheet__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--rp-text-mute);
  -webkit-tap-highlight-color: transparent;
}
.rp-r-sheet__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* plein écran (sommaire) */
.rp-r-sheet--full .rp-r-sheet__panel {
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + 22px)
           max(var(--rp-r-gutter), env(safe-area-inset-right, 0px))
           calc(env(safe-area-inset-bottom, 0px) + 32px)
           max(var(--rp-r-gutter), env(safe-area-inset-left, 0px));
  transform: translateY(14px);
  opacity: 0;
  transition: transform 300ms var(--rp-ease), opacity 240ms var(--rp-ease);
}
.rp-r-sheet--full.is-open .rp-r-sheet__panel { transform: none; opacity: 1; }

/* feuille basse (références, réglages) */
.rp-r-sheet--bottom .rp-r-sheet__panel {
  left: 0; right: 0; bottom: 0;
  /* `svh` = viewport le PLUS PETIT (barres Safari déployées). Avec `vh`, la
     feuille est dimensionnée sur le viewport chrome rétracté : au premier
     tap, barres visibles, son bas (CTA + safe-area) passe sous la toolbar. */
  max-height: 80vh;
  max-height: 80svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--rp-noir-soft);
  border-top: 1px solid var(--rp-border-or);
  border-radius: 18px 18px 0 0;
  padding: 26px
           max(var(--rp-r-gutter), env(safe-area-inset-right, 0px))
           calc(env(safe-area-inset-bottom, 0px) + 26px)
           max(var(--rp-r-gutter), env(safe-area-inset-left, 0px));
  transform: translateY(102%);
}
.rp-r-sheet--bottom.is-open .rp-r-sheet__panel { transform: none; }
.rp-r-sheet__grab {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--rp-border-soft);
  margin: -12px auto 18px;
}

.rp-r-sheet__title {
  font-family: var(--rp-font-body);
  font-size: var(--rp-w-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-or);
  margin: 0 0 22px;
}

/* --- Liste des chapitres ----------------------------------------- */
.rp-r-toc { list-style: none; margin: 0; padding: 0; }
.rp-r-toc__item + .rp-r-toc__item { border-top: 1px solid var(--rp-border-faint); }
.rp-r-toc__link {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 16px 2px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.rp-r-toc__num {
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--rp-or);
}
.rp-r-toc__label {
  font-family: var(--rp-font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rp-text-main);
}
.rp-r-toc__time {
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--rp-text-dim);
  white-space: nowrap;
}
.rp-r-toc__state {
  grid-column: 2 / -1;
  font-family: var(--rp-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-dim);
  margin-top: 5px;
}
.rp-r-toc__item.is-current .rp-r-toc__label { color: var(--rp-or); }
.rp-r-toc__item.is-current .rp-r-toc__state,
.rp-r-toc__item.is-done .rp-r-toc__state { color: var(--rp-or); }
.rp-r-toc__item.is-done .rp-r-toc__label { color: var(--rp-text-mute); }

/* --- Bandeau de reprise de lecture ------------------------------- */
.rp-r-resume {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px max(var(--rp-r-gutter), env(safe-area-inset-left, 0px))
           calc(12px + env(safe-area-inset-bottom, 0px))
           max(var(--rp-r-gutter), env(safe-area-inset-right, 0px));
  background: var(--rp-r-bar-bg);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-top: 1px solid var(--rp-border-or);
  transform: translateY(120%);
  transition: transform 420ms var(--rp-ease);
}
.rp-r-resume.is-open { transform: none; }
.rp-r-resume__go {
  flex: 1;
  min-width: 0;
  text-align: left;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  -webkit-tap-highlight-color: transparent;
}
.rp-r-resume__label {
  font-family: var(--rp-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--rp-or);
}
.rp-r-resume__sub {
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-dim);
}
.rp-r-resume__reset {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rp-border-faint);
  border-radius: 999px;
  font-family: var(--rp-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-mute);
  -webkit-tap-highlight-color: transparent;
}

/* --- D1 · Blocs MISE EN PRATIQUE --------------------------------- */
.rp-r-do__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.rp-r-do__count {
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-dim);
  white-space: nowrap;
}
.rp-r-do__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.rp-r-do__list > li {
  position: relative;
  padding: 15px 18px 15px 52px;
  background: var(--rp-noir-soft);
  border: 1px solid var(--rp-border-faint);
  border-radius: 12px;
  font-size: calc(16px * var(--rp-reader-scale));
  line-height: 1.6;
  color: var(--rp-text-main);
  transition: border-color 240ms var(--rp-ease), background 240ms var(--rp-ease);
}
html.rp-r-js .rp-r-do__list > li {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rp-r-do__box {
  position: absolute;
  left: 17px;
  top: 16px;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  border: 1.5px solid var(--rp-border-or);
  display: grid;
  place-items: center;
  transition: transform 180ms var(--rp-ease), background 200ms, border-color 200ms;
}
.rp-r-do__box svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--rp-r-on-gold);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 160ms;
}
/* Le lecteur enveloppe le contenu de chaque <li> dans ce span (contrat §3).
   `display: block` fige la boîte du texte à côté de la case en position
   absolue : sans lui, un <li> qui contiendrait un élément de bloc ferait
   dériver l'alignement. Aucun autre traitement (barré, grisé) : la case
   cochée dit déjà « fait », le reste serait de la décoration. */
.rp-r-do__text { display: block; }
.rp-r-do__list > li.is-done { border-color: var(--rp-border-or); background: var(--rp-r-or-a06); }
.rp-r-do__list > li.is-done .rp-r-do__box { background: var(--rp-r-gold); border-color: var(--rp-or); }
.rp-r-do__list > li.is-done .rp-r-do__box svg { opacity: 1; }
.rp-r-do__box.is-pop { transform: scale(1.16); }

/* --- Encadré « À RETENIR » --------------------------------------- */
.rp-r-key {
  max-width: var(--rp-r-read-w);
  margin: 0 auto clamp(40px, 6vh, 72px);
  padding: 0 var(--rp-r-gutter);
  padding-left: max(var(--rp-r-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rp-r-gutter), env(safe-area-inset-right, 0px));
}
.rp-r-key__box {
  border-left: 2px solid var(--rp-or);
  background: linear-gradient(90deg, var(--rp-r-or-a06), transparent 70%);
  padding: 18px 20px 20px;
  border-radius: 0 10px 10px 0;
}
.rp-r-key__label {
  font-family: var(--rp-font-body);
  font-size: var(--rp-w-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-or);
  margin: 0 0 10px;
}
.rp-r-key p {
  font-size: calc(16.5px * var(--rp-reader-scale));
  line-height: 1.65;
  color: var(--rp-text-main);
  margin: 0 0 12px;
}
.rp-r-key p:last-child { margin-bottom: 0; }

/* --- Références : appel de note + bloc replié -------------------- */
.rp-r-cite {
  position: relative;
  font-family: var(--rp-font-mono);
  font-size: 0.66em;
  vertical-align: super;
  line-height: 0;
  color: var(--rp-or);
  padding: 0 1px 0 2px;
  -webkit-tap-highlight-color: transparent;
}
/* Zone de tap élargie : l'exposant fait ~11px de haut, très en dessous du
   minimum tactile. Le pseudo-élément porte la cible de 44px SANS toucher au
   flux du texte (l'appel de note ne doit pas écarter les lignes du
   paragraphe). Centré sur le chiffre, il déborde par-dessus l'interligne. */
.rp-r-cite::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
@media (hover: hover) {
  .rp-r-cite:hover { color: var(--rp-r-or-hover); }
}
.rp-r-refs {
  max-width: var(--rp-r-read-w);
  margin: 0 auto clamp(40px, 6vh, 72px);
  padding: 0 var(--rp-r-gutter);
  padding-left: max(var(--rp-r-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rp-r-gutter), env(safe-area-inset-right, 0px));
}
.rp-r-refs__box { border-top: 1px solid var(--rp-border-faint); padding-top: 14px; }
.rp-r-refs__summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-dim);
  -webkit-tap-highlight-color: transparent;
}
.rp-r-refs__summary::-webkit-details-marker { display: none; }
.rp-r-refs__summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 220ms var(--rp-ease);
}
.rp-r-refs__box[open] .rp-r-refs__summary::after { transform: rotate(225deg) translateY(-2px); }
.rp-r-refs__list {
  margin: 6px 0 4px;
  padding-left: 22px;
  display: grid;
  gap: 12px;
}
.rp-r-refs__list li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--rp-text-mute);
}
.rp-r-refs__list li a { color: var(--rp-or); border-bottom: 1px solid var(--rp-r-or-a40); }

/* Contenu de la feuille de référence */
.rp-r-ref__title {
  font-family: var(--rp-font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--rp-text-main);
  margin: 0 0 10px;
}
.rp-r-ref__meta {
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-dim);
  margin: 0 0 20px;
}
.rp-r-ref__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  background: var(--rp-r-gold);
  color: var(--rp-noir);
  font-family: var(--rp-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- D3 · Réglages de lecture ------------------------------------ */
.rp-r-prefs__group + .rp-r-prefs__group { margin-top: 24px; }
.rp-r-prefs__legend {
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rp-text-dim);
  margin: 0 0 10px;
}
.rp-r-prefs__row { display: grid; grid-auto-flow: column; gap: 10px; }
.rp-r-prefs__opt {
  min-height: 52px;
  border: 1px solid var(--rp-border-faint);
  border-radius: 12px;
  background: var(--rp-noir);
  color: var(--rp-text-main);
  font-family: var(--rp-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 200ms, color 200ms, background 200ms;
}
.rp-r-prefs__opt[aria-pressed="true"] {
  border-color: var(--rp-or);
  color: var(--rp-or);
  background: var(--rp-r-or-a06);
}
.rp-r-prefs__opt--s { font-size: 14px; }
.rp-r-prefs__opt--m { font-size: 17px; }
.rp-r-prefs__opt--l { font-size: 21px; }
.rp-r-prefs__opt--theme { font-size: 14px; }


/* =============================================================
   4 bis · HABILLAGE rp4 (refonte du 02/10/2026)
   Ce qui ne se règle pas par les seules variables : CTA à l'encre,
   étiquettes grises (l'or en texte reste réservé aux grands chiffres
   et aux appels de note), barre et bandeau en verre, feuilles en
   surface rp4. Les règles d'origine plus haut restent la base.
   ============================================================= */

/* Étiquettes : grises, en capitales légères, sans trait doré (rp4 : une
   eyebrow est grise, jamais encadrée ni soulignée). */
.rp-fond-block__eyebrow,
.rp-fond-bilan__eyebrow,
.rp-r-sheet__title,
.rp-r-key__label,
.rp-fond-result__leaks-label {
  color: var(--rp-text-mute);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.rp-fond-block__eyebrow { padding-bottom: 0; margin-bottom: 14px; }
.rp-fond-block__eyebrow::after { display: none; }

/* (Sceau d'ouverture et échelle des titres : réglés à la source, plus haut,
   corrections du 02/10 soir. Plus de pastille encadrée ni de point or.) */
.rp-fond-part__sub,
.rp-fond-bilan__hint { color: var(--rp-text-mute); }

/* Citation de clôture : plus de Georgia, une phrase en pile système. */
.rp-fond-close__quote {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--rp-text-main);
}

/* CTA : à l'encre (comme l'app), pilule, sans ombre dorée. */
.rp-fond-close__cta,
.rp-r-ref__open {
  color: var(--rp-r-cta-text);
  background: var(--rp-r-cta-bg);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-size: 17px;
  letter-spacing: 0;
}
.rp-fond-close__cta { min-height: 52px; padding: 0 28px; }
.rp-fond-close__cta:active,
.rp-r-ref__open:active { background: var(--rp-r-cta-pressed); }
@media (hover: hover) and (pointer: fine) {
  .rp-fond-close__cta:hover,
  .rp-r-ref__open:hover { background: var(--rp-r-cta-pressed); transform: none; box-shadow: none; }
}

/* Liens de texte : bleu système, comme partout sur le site. */
.rp-fond-result__next,
.rp-r-refs__list li a {
  color: var(--rp-r-link);
  border-bottom-color: transparent;
}

/* Barre haute : verre rp4, boutons à l'encre. */
.rp-r-bar {
  -webkit-backdrop-filter: var(--rp-r-glass-blur);
  backdrop-filter: var(--rp-r-glass-blur);
  border-bottom: 0.5px solid var(--rp-border-soft);
}
.rp-r-bar__btn { color: var(--rp-text-main); font-weight: 600; font-size: 12px; }
@media (hover: hover) and (pointer: fine) {
  .rp-r-bar__btn:hover { border-color: transparent; background: var(--rp-r-surface-hover); }
}
.rp-guide-progress { background: transparent; }

/* Bandeau de reprise : même verre, filet neutre. */
.rp-r-resume {
  -webkit-backdrop-filter: var(--rp-r-glass-blur);
  backdrop-filter: var(--rp-r-glass-blur);
  border-top: 0.5px solid var(--rp-border-soft);
}
.rp-r-resume__label { color: var(--rp-text-main); }

/* Feuilles : surface rp4, coins de 20 px, ombre douce au lieu du filet or. */
.rp-r-sheet--full .rp-r-sheet__panel { background: var(--rp-noir); }
.rp-r-sheet--bottom .rp-r-sheet__panel {
  background: var(--rp-noir-soft);
  border-top: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: var(--rp-r-sheet-shadow);
}
.rp-r-toc__num { color: var(--rp-text-mute); }
.rp-r-toc__item.is-current .rp-r-toc__label { color: var(--rp-text-main); font-weight: 700; }
.rp-r-toc__item.is-current .rp-r-toc__state { color: var(--rp-or); }
.rp-r-toc__item.is-done .rp-r-toc__state { color: var(--rp-text-mute); }

/* Réglages : options en segments rp4, l'option active à l'encre. */
.rp-r-prefs__opt { background: var(--rp-noir); border-color: transparent; }
.rp-r-prefs__opt[aria-pressed="true"] {
  border-color: var(--rp-r-cta-bg);
  color: var(--rp-r-cta-text);
  background: var(--rp-r-cta-bg);
}
.rp-r-prefs__row { grid-auto-columns: 1fr; }

/* Cases de mise en pratique : carte blanche, case cochée en or plein. */
.rp-r-do__list > li { border-color: transparent; }
.rp-r-do__box { border-color: var(--rp-border-soft); }
.rp-r-do__list > li.is-done { border-color: transparent; background: var(--rp-noir-soft); }
.rp-r-do__list > li.is-done .rp-r-do__box { background: var(--rp-r-gold); border-color: var(--rp-r-gold); }

/* Encadré « À retenir » : la carte opaque de rp4 (.rp4-box), coins de 20 px,
   sans liseré or ni dégradé : l'étiquette grise suffit à dire ce que c'est. */
.rp-r-key__box {
  border-left: 0;
  background: var(--rp-noir-soft);
  border-radius: 20px;
  padding: 20px 22px 22px;
}

/* Quiz : réponses en cartes rp4. */
.rp-fond-answer { border-color: transparent; border-radius: 20px; }
.rp-fond-answer.is-selected { border-color: var(--rp-r-gold); background: var(--rp-noir-soft); }
@media (hover: hover) and (pointer: fine) {
  .rp-fond-answer:hover { border-color: var(--rp-border-or); background: var(--rp-noir-soft); }
}
.rp-fond-result__leaks { border-color: transparent; border-left: 0; border-radius: 20px; }
.rp-fond-quiz__restart,
.rp-fond-quiz__back { font-weight: 600; }
.rp-fond-score-ring__num { color: var(--rp-text-main); }


/* Chrome du lecteur (barre, bandeau de reprise, sommaire) : casse normale,
   comme les barres de l'app. Les capitales restent aux étiquettes. */
.rp-r-bar__btn,
.rp-r-bar__state,
.rp-r-resume__sub,
.rp-r-resume__reset,
.rp-r-toc__state,
.rp-r-prefs__legend,
.rp-r-refs__summary,
.rp-r-do__count,
.rp-r-meta,
.rp-fond-quiz__progress,
.rp-fond-quiz__restart,
.rp-fond-quiz__back,
.rp-fond-result__saved {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
.rp-r-bar__btn { font-size: 15px; }
.rp-r-bar__btn--aa { font-size: 17px; }
.rp-r-bar__state { font-size: 13px; font-variant-numeric: tabular-nums; }
.rp-r-resume__sub { font-size: 13px; }
.rp-r-resume__reset { font-size: 14px; font-weight: 600; color: var(--rp-text-main); }
.rp-r-refs__summary { font-size: 15px; font-weight: 600; }
.rp-r-meta { font-size: 15px; }
/* « À retenir » : l'étiquette garde sa taille d'étiquette (la règle des
   paragraphes de l'encadré la grossissait). */
.rp-r-key .rp-r-key__label { font-size: var(--rp-w-eyebrow); line-height: 1.3; margin-bottom: 10px; }

/* =============================================================
   5 · PRÉFÉRENCES DE MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .rp-fond-opening p,
  .rp-fond-opening__seal { animation: none; opacity: 1; transform: none; }

  .rp-r-armed { opacity: 1 !important; transform: none !important; }
  /* Quiz : seule l'étape active est visible (les autres sont empilées en
     position absolue ; les rendre toutes opaques les superposait). */
  .rp-fond-quiz__step { transform: none !important; transition: none !important; }
  .rp-fond-quiz__step.is-active { opacity: 1 !important; }

  .rp-fond-loop.rp-r-anim .rp-fond-loop__circle,
  .rp-fond-loop.rp-r-anim .rp-fond-loop__arrow-head { opacity: 1 !important; }
  .rp-fond-loop.rp-r-anim .rp-fond-loop__arrow { stroke-dashoffset: 0 !important; }

  .rp-r-bar,
  .rp-r-resume,
  .rp-r-sheet__panel,
  .rp-r-sheet__scrim,
  .rp-r-armed,
  .rp-fond-answer,
  .rp-r-do__box,
  .rp-fond-loop.rp-r-anim .rp-fond-loop__circle,
  .rp-fond-loop.rp-r-anim .rp-fond-loop__arrow,
  .rp-fond-loop.rp-r-anim .rp-fond-loop__arrow-head { transition: none !important; }

  .rp-r-bar.is-visible,
  .rp-r-resume.is-open,
  .rp-r-sheet--bottom.is-open .rp-r-sheet__panel,
  .rp-r-sheet--full.is-open .rp-r-sheet__panel { transform: none; opacity: 1; }
}