/* ═══════════════════════════════════════════════════════════════
   PLAN D'ACTION ANTI-RISQUES — page de capture
   Feuille autonome, chargée par roadmap.html UNIQUEMENT.

   ┌───────────────────────────────────────────────────────────┐
   │  APRÈS TOUTE MODIFICATION DE CE FICHIER :                 │
   │  changer la date dans roadmap.html                        │
   │      <link href="css/roadmap.css?v=AAAAMMJJx" ...>        │
   │  et envoyer LES DEUX fichiers.                            │
   └───────────────────────────────────────────────────────────┘
   .htaccess demande aux navigateurs de garder les .css pendant UN AN.
   Tant que l'adresse ne change pas, ils rejouent la copie qu'ils ont,
   quoi qu'il y ait sur le serveur.

   Arrivé le 18/08/2026 : cette feuille a été corrigée trois fois dans la
   journée sans que le ?v= bouge. Le serveur servait bien la dernière
   version — vérifié octet par octet — mais le navigateur appliquait la
   première : la couverture s'affichait en texte nu sur un rectangle
   noir. La page paraissait cassée en ligne et correcte en local.
   Même panne que celle décrite en tête de js/roadmap-actif.js.

   ── Le nom du document et le nom des fichiers diffèrent ──
   Le document s'appelle « Plan d'action Anti-risques », d'après sa
   couverture, et c'est ce nom qui s'affiche partout sur le site. Les
   fichiers et l'adresse publique gardent « roadmap » : roadmap.html,
   roadmap.css, roadmap-actif.js, /roadmap. Ce n'est pas un oubli — la
   page a d'abord porté ce nom, l'adresse a été retenue telle quelle, et
   la renommer coûterait une redirection permanente pour rien.
   Rien à corriger : le visiteur ne lit jamais « roadmap » ailleurs que
   dans la barre d'adresse.

   Pourquoi ne pas réutiliser la pile du site ?
   index.html charge 8 feuilles (bootstrap, animate, swiper, fancybox,
   tm-bs-mp, tm-utility-classes, style, custom-fixes) et 14 scripts —
   environ 1,4 Mo avant le premier pixel. Sur une page dont le seul but
   est de faire remplir trois champs, chaque dixième de seconde se paie
   en formulaires abandonnés, et 99 % de ce poids sert des sections
   (carrousels, parallaxe, lightbox) que cette page n'a pas.

   Cette feuille reprend donc à l'identique les valeurs du système visuel
   du site — or de marque, familles typographiques, traitement des
   boutons, champs de formulaire — dans un fichier de quelques kilo-octets.
   Elle en est une copie, pas un import : une évolution de la charte doit
   être reportée ici À LA MAIN. Les valeurs concernées sont regroupées
   dans le bloc :root ci-dessous pour que ce report reste simple.
═══════════════════════════════════════════════════════════════ */

/* ── Valeurs reprises du site ──────────────────────────────────
   Source : css/custom-fixes.css (bloc :root) et css/style.css (bloc :root).
   Ne pas diverger sans reporter le changement des deux côtés. */
:root {
  --brand-gold: #bd8b17;
  --brand-gold-deep: #a97a12;
  --brand-gold-soft: #d4aa44;

  --rm-ink: #0a0a0a;          /* --headings-color du thème */
  --rm-body: #646464;         /* --text-color du thème */
  --rm-dark: #111111;         /* fond des bandeaux sombres du site */
  --rm-cream: #f8f5f0;        /* --theme-color-light du thème */
  --rm-field-bg: #f8f6f2;     /* .cf-input du site */
  --rm-field-border: #e6ddd0; /* .cf-input du site */
  --rm-hairline: #e9e2d6;

  --rm-heading-font: "DM Sans", sans-serif;
  --rm-body-font: "Poppins", sans-serif;

  /* Relief commun à tous les boutons du site, repris de la section
     « SYSTÈME VISUEL DES BOUTONS » de custom-fixes.css. */
  --btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(0, 0, 0, 0.14) 100%);
  --btn-ring: 0 0 0 1px rgba(255, 255, 255, 0.16) inset;

  /* Encre des libellés posés sur un fond doré, reprise de la section
     « CONTRASTE » de custom-fixes.css. Le libellé blanc donnait 3,06:1
     sur l'or, sous le seuil de 4,5:1 applicable à 16px gras. */
  --btn-gold-ink: #111111;
}

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

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

body {
  margin: 0;
  background: #ffffff;
  color: var(--rm-body);
  font-family: var(--rm-body-font);
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--rm-heading-font);
  color: var(--rm-ink);
  margin: 0;
  line-height: 1.15;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

::selection {
  background: rgba(189, 139, 23, 0.3);
  color: #111111;
}

.rm-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Repris du site : un lien d'évitement visible uniquement au clavier. */
.rm-skip {
  position: absolute;
  left: -9999px;
}

.rm-skip:focus {
  left: 16px;
  top: 16px;
  z-index: 99;
  background: var(--rm-dark);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   EN-TÊTE RÉDUIT
   Une page de capture n'affiche pas le menu du site : chaque entrée est
   une sortie possible avant que le visiteur ait laissé ses coordonnées.
   Il reste un seul chemin de retour, explicite, à droite.
═══════════════════════════════════════════════════════════════ */
.rm-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rm-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
}

.rm-header__logo img {
  max-height: 46px;
  width: auto;
}

.rm-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #4a4a4a;
  text-decoration: none;
  padding: 8px 4px;
  border-radius: 8px;
  transition: color 0.22s ease;
}

.rm-back:hover,
.rm-back:focus-visible {
  color: var(--brand-gold);
}

.rm-back .au-icon {
  font-size: 17px;
  transition: transform 0.22s ease;
}

.rm-back:hover .au-icon {
  transform: translateX(-3px);
}

/* ═══════════════════════════════════════════════════════════════
   BLOC 1 — ZONE D'ACCROCHE
   Deux colonnes : le discours et le formulaire à gauche, la couverture
   du document à droite. La couverture reste au-dessus du formulaire sur
   mobile — elle explique en une seconde ce qu'on reçoit, et le
   formulaire n'a de sens qu'une fois cette promesse comprise.
═══════════════════════════════════════════════════════════════ */
.rm-hero {
  background: linear-gradient(180deg, var(--rm-cream) 0%, #ffffff 100%);
  padding: 68px 0 84px;
  position: relative;
  overflow: hidden;
}

/* Trois zones plutôt que deux colonnes : le discours et le formulaire sont
   deux blocs distincts, la couverture occupe la colonne de droite sur toute
   la hauteur. Sans cette séparation, l'ordre de lecture sur mobile devenait
   couverture → titre → formulaire : le visiteur tombait sur l'image d'un
   document avant d'avoir lu de quoi il s'agissait. */
.rm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-areas:
    "intro  book"
    "action book";
  column-gap: 64px;
  row-gap: 34px;
  align-items: center;
}

.rm-hero__intro {
  grid-area: intro;
  align-self: end;
}

.rm-hero__action {
  grid-area: action;
  align-self: start;
}

.rm-book-wrap {
  grid-area: book;
}

/* ── Surtitre ──
   Reprend le principe du .sub-title du site (petites capitales espacées)
   sans ses deux triangles animés : ici il porte une mention de
   réservation, pas un nom de rubrique. La pastille le pose comme une
   étiquette et non comme un titre de section. */
.rm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(189, 139, 23, 0.1);
  border: 1px solid rgba(189, 139, 23, 0.22);
  color: var(--brand-gold-deep);
  font-family: var(--rm-heading-font);
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 26px;
}

.rm-eyebrow .au-icon {
  font-size: 13px;
  color: var(--brand-gold);
}

/* La borne haute est nettement sous les 80px du h1 du site : ce titre
   compte trois lignes là où celui de l'accueil en tient deux, et doit
   cohabiter avec un formulaire dans la même colonne. */
.rm-hero h1 {
  font-size: clamp(2rem, 3.2vw, 2.95rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}

.rm-hero__lead {
  font-size: 1.03rem;
  line-height: 1.72;
  max-width: 34rem;
}

.rm-hero__lead strong {
  color: #2f2f2f;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   MAQUETTE 3D DU DOCUMENT
   Une boîte à quatre faces qui tourne lentement sur elle-même, et
   dont la couverture s'ouvre au survol sur la première page.

   Les deux faces imprimées reprennent la couverture et l'Avant-Propos
   du PDF, redessinés ici. La toute première version annonçait
   « Roadmap du Dirigeant » : un titre qui ne figurait nulle part sur le
   document livré. La maquette promettait un autre objet que celui
   téléchargé — c'est la faute à ne pas refaire.

   ── Construction ──────────────────────────────────────────────
   Épaisseur du volume : 18px, donc ±9px de part et d'autre du plan
   médian. Cette valeur revient dans TOUTES les faces ; la changer
   suppose de la changer partout, sinon la boîte s'ouvre aux angles.

     couverture (flap)  translateZ(+9)
     page intérieure    translateZ(+6)     — dessous, découverte à l'ouverture
     quatrième          rotateY(180) translateZ(+9)
     dos                translateZ(-9) rotateY(-90)   origine bord gauche
     tranche            translateZ(-9) rotateY(+90)   origine bord droit
     tête (::before)    translateZ(-9) rotateX(+90)   origine bord haut

   L'ordre compte : la rotation s'applique d'abord (autour du bord
   choisi comme origine), le translateZ ensuite dans le repère de la
   scène. Écrit dans l'autre sens, les faces minces se retrouvent
   décalées d'une demi-épaisseur et le volume fuit.
═══════════════════════════════════════════════════════════════ */
.rm-book-wrap {
  display: flex;
  justify-content: center;
  /* Perspective longue : à 1600px et moins, une face qui passe de profil
     s'étire violemment en fin de tour. Le livre paraît en caoutchouc. */
  perspective: 2100px;
}

.rm-book-scene {
  position: relative;
  width: 100%;
  max-width: 300px;
  /* Léger plongé : sans lui la rotation se lit comme un simple
     retournement de carte, et la tête du volume ne se voit jamais. */
  transform: rotateX(7deg);
  transform-style: preserve-3d;
}

/* Ombre portée au sol. Enfant de la scène et non du livre : accrochée
   au livre, elle tournerait avec lui — une ombre qui pivote trahit
   immédiatement le trucage. */
.rm-book-scene::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -22px;
  height: 26px;
  transform: translateZ(-46px);
  background: radial-gradient(
    ellipse at center,
    rgba(24, 20, 14, 0.3) 0%,
    rgba(24, 20, 14, 0) 72%
  );
  pointer-events: none;
}

.rm-book {
  position: relative;
  width: 100%;
  /* Portrait, comme un ouvrage relié. Le document, lui, est en PAYSAGE
     (842 × 595 pt) : ses pages ne peuvent donc pas être reprises telles
     quelles, elles laisseraient deux bandes vides. Les deux faces sont
     redessinées pour cette hauteur — voir la note en tête. */
  aspect-ratio: 1 / 1.4138;
  /* Échelle des deux faces dessinées, couverture et page intérieure.
     UNE SEULE valeur à reprendre par point de rupture : tout ce qui est
     imprimé sur le livre est exprimé en em, donc suit d'un seul tenant.
     La règle : 1em = un dixième de la largeur du livre. */
  font-size: 30px;
  transform-style: preserve-3d;
  animation: rm-tour 26s linear infinite;
  /* Sert au retour vers la face avant quand le curseur arrive : le
     script coupe l'animation et confie la fin du mouvement à cette
     transition. Une animation ne sait pas s'arrêter « en douceur ». */
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes rm-tour {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* ── Faces imprimées ── */
.rm-book__page,
.rm-book__back,
.rm-book__cover,
.rm-book__cover-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Sans quoi chaque face se verrait en miroir à travers le volume
     pendant le demi-tour, superposée à celle d'en face. */
  backface-visibility: hidden;
}

/* Couverture articulée. C'est le seul élément qui bouge au survol ;
   le livre, lui, se contente de s'arrêter face au lecteur. */
.rm-book__flap {
  position: absolute;
  inset: 0;
  transform: translateZ(9px);
  transform-origin: left center; /* le dos, charnière du carton */
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.34, 0.02, 0.2, 1);
}

/* Angle mesuré à l'écran, pas choisi sur le papier. Le raisonnement :
   grand ouverte (150° et plus), la couverture se rabat vers la gauche et
   déborde de 400px sur le texte et le formulaire — sur une page de
   capture, la maquette recouvrait l'endroit même où l'on saisit son
   e-mail. À 100°, elle passe presque de profil : la page se découvre
   entièrement et le carton n'empiète plus que de 52 px (300 × cos 80°),
   qui tombent dans la gouttière entre les deux colonnes.

   Le livre s'immobilise à 7° et non à 0° pour la même raison : ces
   quelques degrés suffisent à écarter le carton du bloc de texte, et le
   volume se lit mieux qu'en vue strictement frontale. L'angle est
   appliqué par le script — voir ANGLE_OUVERT dans roadmap.html. */
.rm-book-wrap.est-ouvert .rm-book__flap {
  transform: translateZ(9px) rotateY(-100deg);
}

/* ── Couverture ──
   Redessinée d'après la couverture du PDF, et non photographiée : celle
   du document est en paysage, donc soit elle laissait deux bandes noires
   en haut et en bas du livre, soit il fallait la rogner de moitié et
   couper le titre. Voir la note dans roadmap.html.

   TOUTE CORRECTION DE LA COUVERTURE DU PDF SE REPORTE ICI À LA MAIN.

   Tout est dimensionné en em. Le seul réglage est le font-size de ce
   bloc, redéfini à chaque point de rupture : la couverture se met alors
   à l'échelle d'un seul tenant, sans qu'aucune valeur ci-dessous bouge.
   La règle : 1em = un dixième de la largeur du livre. */
.rm-book__cover {
  border-radius: 3px 9px 9px 3px;
  font-family: var(--rm-heading-font);
  background:
    radial-gradient(115% 78% at 50% 30%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(158deg, #1e1e1e 0%, #060606 56%, #131313 100%);
  display: flex;
  flex-direction: column;
  padding: 1.55em 1em 1.05em;
}

/* Chevrons dorés des deux angles. Deux carrés tournés de 45° dont on ne
   voit que la pointe : c'est la construction du motif sur le document,
   et c'est déjà celle de la quatrième de couverture — les deux faces
   restent ainsi du même dessin. */
.rm-book__chevron {
  position: absolute;
  width: 3.5em;
  height: 3.5em;
  border: 0.42em solid var(--brand-gold);
  transform: rotate(45deg);
}

.rm-book__chevron::before {
  content: "";
  position: absolute;
  inset: -1.15em;
  border: 0.4em solid #ffffff;
}

.rm-book__chevron--haut {
  top: -1.75em;
  left: -1.9em;
}

.rm-book__chevron--bas {
  bottom: -1.85em;
  right: -1.95em;
}

.rm-book__titre {
  position: relative;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: #ffffff;
  text-align: center;
  margin: 0 0 0.75em;
}

/* « Anti-risques » est le seul mot doré du titre, sur le document comme
   ici : c'est lui qui porte la promesse. */
.rm-book__titre em {
  font-style: normal;
  color: var(--brand-gold-soft);
}

.rm-book__accroche {
  position: relative;
  font-family: var(--rm-body-font);
  font-size: 0.3em;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  /* Pousse le bloc « Guide 2026 » vers le bas de la couverture, comme sur
     le document, sans hauteur fixe à entretenir. */
  margin: 0 0 auto;
}

.rm-book__guide {
  position: relative;
  font-size: 0.62em;
  font-weight: 400;
  letter-spacing: 0.42em;
  /* La lettre espacée ajoute un blanc APRÈS la dernière lettre : sans ce
     retrait, le mot paraît décalé vers la gauche par rapport à l'année. */
  text-indent: 0.42em;
  color: #ffffff;
  text-align: center;
  margin: 0;
}

.rm-book__annee {
  position: relative;
  font-size: 1.72em;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center;
  margin: 0;
}

/* Le 6 seul en doré, comme sur le document. */
.rm-book__annee em {
  font-style: normal;
  color: var(--brand-gold);
}

/* En bas à GAUCHE, alors qu'il est à droite sur le document. Sur une
   couverture large les deux tiennent dans le même angle ; en portrait le
   chevron doré vient barrer le logo en plein milieu du mot. L'angle
   opposé est le seul endroit libre, et il équilibre le chevron du haut. */
.rm-book__marque {
  position: relative;
  align-self: flex-start;
  width: 2.75em;
  height: auto;
  margin-top: 0.8em;
  opacity: 0.9;
}

/* Intérieur du carton : le crème d'un papier de garde. Retourné, il ne
   se montre qu'une fois le livre ouvert.

   Le fond de la page étant lui-même crème, un aplat clair y disparaît :
   au premier rendu, le carton ouvert n'était plus qu'une tache pâle
   posée sur le texte, sans bord ni épaisseur. D'où le dégradé qui
   fonce vers la charnière, le liseré et l'ombre portée — trois marques
   discrètes, mais sans lesquelles l'objet ne se détache pas du papier.

   Attention au sens : cette face est retournée de 180°, son bord DROIT
   est donc la charnière. Le dégradé fonce vers 100 %, pas vers 0. */
.rm-book__cover-in {
  transform: rotateY(180deg);
  border-radius: 9px 3px 3px 9px;
  background: linear-gradient(90deg, #fdfaf5 0%, #f2ebdf 82%, #e4dac7 100%);
  box-shadow:
    inset -1px 0 0 rgba(189, 139, 23, 0.35),
    inset 0 0 0 1px rgba(90, 70, 40, 0.09),
    0 28px 50px -26px rgba(52, 40, 18, 0.55);
}

/* ── Page intérieure ──
   L'Avant-Propos du document, redessiné pour la hauteur d'un livre —
   même raison que la couverture : la page du PDF est en paysage, posée
   telle quelle elle laissait deux marges blanches en haut et en bas.

   Elle ne contient AUCUNE image : titre, onglets, corps, libellés
   surlignés, signature et pastilles beiges sont tous dessinés ici. Net à
   toute taille, corrigeable sans rien réexporter, et pas une requête de
   plus au chargement.

   La photo du directeur y a figuré un temps, puis a été retirée. La place
   qu'elle occupait est revenue au texte, qui a repris la longueur de
   l'Avant-Propos du document.

   TOUTE CORRECTION DE L'AVANT-PROPOS DU PDF SE REPORTE ICI À LA MAIN. */
.rm-book__page {
  transform: translateZ(6px);
  border-radius: 3px 8px 8px 3px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  /* Pas de marge basse : la photo et la signature descendent jusqu'au
     bord, comme sur le document. */
  padding: 0.62em 0.58em 0;
}

/* Le petit repère rond sous le titre, sur le document. */
.rm-page__pastille {
  position: absolute;
  top: 1.62em;
  left: 0.72em;
  width: 0.12em;
  height: 0.12em;
  border-radius: 50%;
  background: #1a1a1a;
  box-shadow: 0 -0.19em 0 -0.037em #1a1a1a;
}

.rm-page__titre {
  font-family: var(--rm-heading-font);
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111111;
  margin: 0;
}

.rm-page__onglets {
  font-family: var(--rm-heading-font);
  font-size: 0.26em;
  font-weight: 500;
  color: #8d8d8d;
  margin: 0.35em 0 0 2.6em;
}

/* Corps en serif, comme le document — le reste du livre est en sans.
   Familles système : charger une troisième police pour six lignes de
   texte serait une requête pour rien.

   ── Le corps, c'est LE réglage de cette page ──
   Premier essai à 0.163em, soit 4,9 px : à l'échelle réelle du document
   c'est juste, mais un caractère à empattement de 4,9 px se casse en
   pixels isolés et le paragraphe n'est plus qu'une trame grise sale.
   Mesuré à l'écran, pas supposé.

   À 0.29em (8,7 px) les lignes sont nettes et les deux premières phrases
   se lisent vraiment — ce qui donne envie d'ouvrir le document, alors
   qu'une trame grise ne donne envie de rien. Le texte est plus gros que
   sur une vraie page vue à cette taille : c'est assumé, toutes les
   maquettes de livre le font.

   La contrepartie est qu'il tient moins de mots : le texte de
   roadmap.html a été raccourci en conséquence. Rallonger l'un oblige à
   réduire l'autre, la page ayant une hauteur fixe. */
.rm-page__texte {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.29em;
  line-height: 1.5;
  /* Alignement à gauche et non justifié comme le document : sur une
     colonne de sept mots, la justification écarte les mots au point de
     creuser des rivières blanches en travers du paragraphe. */
  text-align: left;
  color: #22252b;
  margin-top: 1.5em;
}

.rm-page__texte p + p {
  margin-top: 0.85em;
}

/* Les trois libellés surlignés, décalés en escalier comme sur la page. */
.rm-page__piliers {
  list-style: none;
  font-family: var(--rm-heading-font);
  font-size: 0.25em;
  font-weight: 700;
  color: #1c1c1c;
  margin: 1.4em 0 0;
  padding: 0;
}

.rm-page__piliers li {
  background: #e9c25e;
  padding: 0.22em 0.55em;
  margin-bottom: 0.28em;
  width: fit-content;
}

.rm-page__piliers li:nth-child(2) {
  margin-left: 1.5em;
}

.rm-page__piliers li:nth-child(3) {
  margin-left: 3em;
}

/* Photo à fond perdu : elle ressort du cadre de texte de la page, d'où
   les marges négatives qui annulent le padding latéral. margin-top: auto
   la plaque en bas quelle que soit la longueur du texte au-dessus. */
/* Pastilles beiges des angles, comme sur la page du document. Elles
   occupent le bas de page laissé libre par le retrait de la photo :
   sans elles la moitié inférieure devenait un aplat blanc vide.

   z-index négatif, et non une valeur positive : le pseudo-élément est
   positionné, donc il se peindrait PAR-DESSUS les paragraphes, qui sont
   dans le flux. En négatif il passe dessous — sans disparaître derrière
   le fond de la page, celle-ci créant son propre contexte
   d'empilement par son transform. */
.rm-book__page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle 0.44em at 97% 3%, #ecdcb4 99%, transparent 100%),
    radial-gradient(circle 0.26em at 87% 10%, #f2e8cf 99%, transparent 100%),
    radial-gradient(circle 0.2em at 96% 14%, #f2e8cf 99%, transparent 100%),
    radial-gradient(circle 0.52em at 2% 92%, #ecdcb4 99%, transparent 100%),
    radial-gradient(circle 0.24em at 14% 97%, #f2e8cf 99%, transparent 100%);
  pointer-events: none;
}

/* Poussée en bas de page, la place libérée par la photo se répartissant
   au-dessus d'elle et non entre les paragraphes. */
.rm-page__signature {
  margin-top: auto;

  font-family: var(--rm-heading-font);
  font-size: 0.3em;
  font-weight: 700;
  line-height: 1.3;
  color: #141414;
  /* Le filet fin qui court sous la signature sur le document. */
  border-top: 1px solid rgba(0, 0, 0, 0.45);
  padding: 0.5em 0 0.6em 1.1em;
  margin-right: -0.4em;
  margin-left: -0.4em;
}

.rm-page__signature span {
  display: block;
  font-weight: 500;
  color: var(--brand-gold-deep);
}

/* Ombre de gouttière, le long du dos : ce creux fait lire une page
   reliée plutôt qu'une image collée sur un rectangle.

   En pseudo-élément et non en box-shadow interne : une ombre interne se
   peint sous le contenu de la boîte, donc sous l'image de la page, où
   elle ne se voit pas. Celle-ci passe par-dessus. */
.rm-book__page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(48, 36, 16, 0.34) 0%,
    rgba(48, 36, 16, 0.08) 5%,
    rgba(48, 36, 16, 0) 11%
  );
  pointer-events: none;
}

/* Reflet diagonal très large et très faible : sans lui la couverture
   est un aplat mat qui ne lit pas comme un objet. */
.rm-book__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}

/* ── Quatrième de couverture ──
   Dessinée, non extraite : la dernière page du PDF est une page de
   remerciement blanche, illisible à cette taille et sans rapport avec
   un dos de livre. Reprend les chevrons dorés de la couverture. */
.rm-book__back {
  transform: rotateY(180deg) translateZ(9px);
  border-radius: 3px 9px 9px 3px;
  background: linear-gradient(150deg, #1b1b1b 0%, #0a0a0a 58%, #141414 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 12% 12%;
}

.rm-book__back::before,
.rm-book__back::after {
  content: "";
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  border: 7px solid var(--brand-gold);
  transform: rotate(45deg);
  opacity: 0.9;
}

.rm-book__back::before {
  top: -17%;
  right: -14%;
}

.rm-book__back::after {
  bottom: -19%;
  left: -15%;
  border-width: 5px;
  opacity: 0.55;
}

.rm-book__back-logo {
  height: 30px;
  width: auto;
  align-self: flex-start;
  margin-bottom: 14px;
  opacity: 0.95;
}

.rm-book__back-line {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.58);
  margin: 0;
}

.rm-book__back-rule {
  display: block;
  width: 46px;
  height: 2px;
  background: var(--brand-gold);
  margin: 14px 0 12px;
}

.rm-book__back-contact {
  font-family: var(--rm-heading-font);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.7;
  color: #ffffff;
  margin: 0;
}

/* ── Faces minces ──
   Elles ne se voient qu'une fraction du tour, mais leur absence se voit
   tout le temps : sans elles le livre devient une feuille de papier
   chaque fois qu'il passe de profil. */
.rm-book__spine {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 18px;
  transform-origin: left center;
  transform: translateZ(-9px) rotateY(-90deg);
  background: linear-gradient(90deg, #151515 0%, #030303 55%, #101010 100%);
  box-shadow: inset 0 0 0 1px rgba(189, 139, 23, 0.28);
}

/* Empilement des pages, sur le bord opposé au dos. Un filet par page :
   plus serré on obtient un dégradé sale, plus lâche un peigne. */
.rm-book__edge {
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 0;
  width: 18px;
  transform-origin: right center;
  transform: translateZ(-9px) rotateY(90deg);
  background: repeating-linear-gradient(90deg, #ffffff 0 2px, #e2dbd0 2px 3px);
}

/* Tête du volume. En pseudo-élément parce qu'elle n'a rien à porter :
   c'est une surface, pas un contenu. Visible grâce au plongé de 7°. */
.rm-book::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  transform-origin: center top;
  transform: translateZ(-9px) rotateX(90deg);
  background: repeating-linear-gradient(90deg, #fdfcfa 0 2px, #e6dfd4 2px 3px);
}

/* ═══════════════════════════════════════════════════════════════
   FORMULAIRE
   Trois champs. Chaque champ supplémentaire se paie en abandons, et
   prénom + e-mail + téléphone suffisent à rappeler un dirigeant.
═══════════════════════════════════════════════════════════════ */
.rm-form-card {
  background: #ffffff;
  border: 1px solid var(--rm-hairline);
  border-radius: 18px;
  padding: 30px 30px 26px;
  box-shadow: 0 20px 46px -26px rgba(12, 14, 20, 0.28);
  max-width: 34rem;
}

.rm-form-card__title {
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.rm-field {
  margin-bottom: 15px;
}

.rm-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #3a3a3a;
  margin-bottom: 7px;
}

.rm-required {
  color: var(--brand-gold);
}

/* Valeurs reprises de .cf-input (formulaire de contact du site). */
.rm-input {
  width: 100%;
  padding: 13px 16px;
  font-size: 0.92rem;
  font-family: inherit;
  color: #1a1e27;
  background: var(--rm-field-bg);
  border: 1.5px solid var(--rm-field-border);
  border-radius: 10px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.rm-input::placeholder {
  color: #a8a29a;
}

.rm-input:focus {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(189, 139, 23, 0.11);
  background: #ffffff;
}

/* Piège à robots : formsubmit.co ignore l'envoi si ce champ est rempli.
   Il remplace le captcha, désactivé pour ne pas ajouter une étape de
   plus entre le visiteur et le document. Masqué sans display:none, que
   certains robots savent détecter. */
.rm-honey {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Bouton principal ──
   Reprend le traitement du CTA « Parlons-en » de l'accueil : aplat doré
   réchauffé d'un dégradé court, ombre teintée or, élévation au survol.

   Le brief demandait un bouton orange ou vert vif. Sur une page dont
   tout le reste est en or de marque, une couleur importée lirait comme
   un élément collé depuis un autre site — l'or EST déjà la couleur
   d'action, et la seule de la page : le contraste recherché est obtenu
   par la surface pleine largeur, pas par une teinte étrangère. */
.rm-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 58px;
  padding: 0 26px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--rm-body-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--btn-gold-ink);
  background-color: var(--brand-gold);
  background-image: linear-gradient(180deg, var(--brand-gold) 0%, var(--brand-gold-deep) 100%);
  box-shadow: var(--btn-ring), 0 8px 22px rgba(189, 139, 23, 0.3);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.rm-submit .au-icon {
  font-size: 19px;
  transition: transform 0.25s ease;
}

.rm-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--btn-ring), 0 14px 30px rgba(189, 139, 23, 0.38);
}

.rm-submit:hover .au-icon {
  transform: translateX(3px);
}

.rm-submit:focus-visible {
  outline: 3px solid var(--brand-gold-deep);
  outline-offset: 3px;
}

.rm-reassure {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 15px;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--warm-600);
}

.rm-reassure .au-icon {
  font-size: 15px;
  color: var(--brand-gold);
  margin-top: 2px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PANNEAU DE CONFIRMATION
   Affiché à la place du formulaire au retour de formsubmit.co
   (roadmap.html?ok=1). Le lien de téléchargement n'apparaît qu'ici :
   posé sur la page, il rendrait le formulaire contournable.
═══════════════════════════════════════════════════════════════ */
.rm-success {
  background: #ffffff;
  border: 1px solid rgba(189, 139, 23, 0.3);
  border-radius: 18px;
  padding: 34px 30px 30px;
  box-shadow: 0 20px 46px -26px rgba(12, 14, 20, 0.28);
  max-width: 34rem;
}

.rm-success__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(189, 139, 23, 0.12);
  color: var(--brand-gold-deep);
  font-size: 24px;
  margin-bottom: 17px;
}

.rm-success h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.rm-success p {
  font-size: 0.93rem;
  line-height: 1.65;
  margin-bottom: 22px;
}

/* ── Lien de secours ──
   Le téléchargement part tout seul ; ce lien ne sert qu'aux cas où le
   navigateur l'a refusé (réglage de téléchargement automatique, mobile
   récalcitrant, blocage d'extension). Il ne doit donc pas ressembler à
   l'action attendue — d'où un lien et non un bouton plein, qui laisserait
   croire qu'il reste un clic à faire. Assez visible cependant pour être
   trouvé sans hésiter par les quelques-uns qui en ont besoin.

   Le sélecteur reprend ".rm-success p" pour peser au moins autant que lui :
   sinon la marge basse de 22px des paragraphes s'ajoutait au rembourrage du
   panneau et creusait un vide sous la dernière ligne. */
.rm-success p.rm-success__fallback {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--rm-hairline);
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--warm-600);
}

.rm-success__fallback a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  color: var(--brand-gold-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.22s ease;
}

.rm-success__fallback a:hover,
.rm-success__fallback a:focus-visible {
  color: var(--brand-gold);
}

.rm-success__fallback .au-icon {
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════
   BLOC 2 — CE QUE VOUS ALLEZ DÉCOUVRIR
   Quatre entrées numérotées, sans encadré lourd : le fond crème et le
   filet suffisent à séparer. Les quatre thèmes reprennent les quatre
   services de la page d'accueil — la Roadmap est l'échantillon écrit de
   ce que le cabinet vend, et cette correspondance doit se voir.
═══════════════════════════════════════════════════════════════ */
.rm-value {
  padding: 92px 0;
  background: #ffffff;
}

.rm-section-head {
  max-width: 40rem;
  margin: 0 auto 52px;
  text-align: center;
}

/* Reprise fidèle du .sub-title du site, triangles compris : ici on est
   bien sur un titre de section, comme sur la page d'accueil. */
.rm-subtitle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 50px;
  margin-bottom: 18px;
  font-family: var(--rm-heading-font);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1.3px;
  color: #9f9f9f;
}

.rm-subtitle .triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 9.803px solid transparent;
  border-bottom: 9.803px solid transparent;
  border-left: 19.606px solid;
}

.rm-subtitle .triangle1 {
  border-left-color: #ffffff;
  left: 5px;
  z-index: 9;
}

.rm-subtitle .triangle2 {
  border-left-color: #113c3d;
  left: 20px;
}

.rm-section-head h2 {
  font-size: clamp(1.7rem, 2.7vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.rm-value__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.rm-value__item {
  background: #fbf9f5;
  border: 1px solid var(--rm-hairline);
  border-radius: 14px;
  padding: 30px 30px 28px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.rm-value__item:hover {
  border-color: rgba(189, 139, 23, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -22px rgba(12, 14, 20, 0.35);
}

.rm-value__num {
  display: block;
  font-family: var(--rm-heading-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--brand-gold);
  margin-bottom: 13px;
}

.rm-value__item h3 {
  font-size: 1.14rem;
  font-weight: 600;
  margin-bottom: 9px;
}

.rm-value__item p {
  font-size: 0.91rem;
  line-height: 1.68;
}

/* ═══════════════════════════════════════════════════════════════
   PIED DE PAGE
═══════════════════════════════════════════════════════════════ */
.rm-footer {
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 26px 0;
}

.rm-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.81rem;
  color: rgba(255, 255, 255, 0.44);
}

.rm-footer__links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.rm-footer__links a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.22s ease;
}

.rm-footer__links a:hover,
.rm-footer__links a:focus-visible {
  color: var(--brand-gold-soft);
}

/* ── Icônes ──
   Même mécanique que sur le site : SVG inline dimensionné en 1em, la
   taille se pilote donc par font-size sur l'élément parent. */
.au-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
}

.au-icon > svg {
  width: 1em;
  height: 1em;
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   ADAPTATION AUX ÉCRANS
═══════════════════════════════════════════════════════════════ */

/* Sous 1100px la couverture ne tient plus à côté d'un titre de trois
   lignes et d'un formulaire : on repasse en une colonne. Le seuil est
   plus haut que le 992px de Bootstrap parce que c'est la largeur du
   couple titre + couverture qui décide, pas celle de l'écran. */
@media (max-width: 1099.98px) {
  /* Une colonne, dans l'ordre de lecture : de quoi il s'agit, à quoi ça
     ressemble, où laisser ses coordonnées. */
  .rm-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "book"
      "action";
    row-gap: 38px;
  }

  .rm-hero__intro,
  .rm-hero__action {
    align-self: auto;
  }

  .rm-book-scene {
    max-width: 268px;
  }

  /* Un dixième de la largeur du livre — voir .rm-book. */
  .rm-book {
    font-size: 26.8px;
  }

  /* En une colonne, le bloc d'accroche est centré et le formulaire posé au
     milieu. Le contenu du formulaire, lui, reste aligné à gauche : des
     libellés centrés au-dessus de champs pleine largeur donnent une
     colonne de saisie que l'œil ne suit plus. Le formulaire n'étant plus
     un enfant de .rm-hero__intro, il n'hérite pas du centrage — rien à
     annuler à l'intérieur. */
  .rm-hero__intro {
    text-align: center;
  }

  .rm-hero__lead,
  .rm-form-card,
  .rm-success {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 991.98px) {
  .rm-value__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .rm-container {
    padding: 0 18px;
  }

  .rm-hero {
    padding: 44px 0 60px;
  }

  .rm-hero h1 {
    font-size: 1.82rem;
  }

  .rm-hero__lead {
    font-size: 0.96rem;
  }

  /* 260 et non 224 : en une colonne le livre a de la place, et cette
     largeur est ce qui fixe le corps du texte imprimé sur la page
     intérieure — à 224px il retombait à 6,5px, la taille même qu'on
     vient de corriger. La plupart des visiteurs sont sur téléphone :
     c'est ici que le réglage compte le plus. */
  .rm-book-scene {
    max-width: 260px;
  }

  .rm-book {
    font-size: 26px;
  }

  /* Le volume ne se met pas à l'échelle avec la largeur : 18px d'épaisseur
     sur un livre de 300px, c'est une brique. On l'amincit, en gardant la
     moitié exacte sur chaque face — voir le bloc de construction. */
  .rm-book__flap {
    transform: translateZ(6px);
  }

  /* Ouverture plus rasante qu'en grand écran, contrepartie du livre
     élargi à 260 px : à 100° la couverture réclamerait 45 px à sa gauche,
     quand un écran de 320 px n'en laisse que 30 — elle serait rognée par
     le bord de la section. À 96°, elle n'en demande plus que 27.

     Le translateZ, lui, est obligatoire quel que soit l'angle : la
     feuille principale ouvre à 9 px, l'épaisseur vaut 12 px ici. Sans
     cette ligne, la couverture saute de 3 px vers l'avant en s'ouvrant. */
  .rm-book-wrap.est-ouvert .rm-book__flap {
    transform: translateZ(6px) rotateY(-96deg);
  }

  .rm-book__page {
    transform: translateZ(4px);
  }

  .rm-book__back {
    transform: rotateY(180deg) translateZ(6px);
  }

  .rm-book__spine,
  .rm-book__edge {
    width: 12px;
  }

  .rm-book__spine {
    transform: translateZ(-6px) rotateY(-90deg);
  }

  .rm-book__edge {
    transform: translateZ(-6px) rotateY(90deg);
  }

  .rm-book::before {
    height: 12px;
    transform: translateZ(-6px) rotateX(90deg);
  }

  .rm-form-card,
  .rm-success {
    padding: 24px 20px 22px;
    border-radius: 14px;
  }

  .rm-value {
    padding: 62px 0;
  }

  .rm-value__item {
    padding: 24px 22px 22px;
  }

  .rm-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Le site respecte déjà cette préférence sur ses boutons et ses
   animations d'apparition : on fait de même ici. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* La rotation continue est le seul mouvement de la page qui parte tout
     seul et ne s'arrête jamais : c'est exactement ce que cette préférence
     demande de couper. Le livre se pose alors de trois quarts, angle qui
     laisse voir le volume sans bouger.

     L'ouverture de la couverture, elle, reste animée : elle est courte,
     locale, et ne se déclenche que sur un geste du visiteur. La supprimer
     remplacerait un mouvement par un saut, ce qui n'aide personne. */
  .rm-book {
    animation: none;
    transform: rotateY(-16deg);
    transition: none;
  }

  .rm-book__flap {
    transition-duration: 0.3s;
  }

  .rm-submit,
  .rm-submit .au-icon,
  .rm-value__item,
  .rm-back .au-icon {
    transition: none;
  }

  .rm-submit:hover,
  .rm-value__item:hover {
    transform: none;
  }

  .rm-submit:hover .au-icon,
  .rm-back:hover .au-icon {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COULEURS — ALIGNEMENT SUR LE SYSTÈME DE LA PLANCHE 118

   Même base que css/custom-fixes.css : la planche 118 de Sanzo Wada
   (Yellow Ocher + Vandyke Brown), accord analogue chaud. Trois points
   traités ici.

   a) L'or de marque servait d'ENCRE sur les fonds clairs de la page :
      3,06:1 sur blanc, 2,81:1 sur --rm-cream. Le seuil est 4,5:1. Étaient
      concernés le numéro de chaque bloc de valeur (.rm-value__num, 0,78rem
      en gras — le repère de lecture de toute la section), l'astérisque des
      champs obligatoires, et le survol des deux liens de la page. Ils
      passent à --gold-text, le palier 700 de l'échelle : 6,51:1 sur blanc,
      5,99:1 sur le crème. L'or de marque reste l'aplat (bouton, bordures,
      pastilles) et reste l'encre du dos de couverture, qui est sombre.

   b) Les gris étaient froids sous un or chaud. #7b7b7b tombait en plus à
      4,23:1. La rampe --warm-* les remplace à luminosité comparable.

   c) Les taches de la page du livre (#ecdcb4, #f2e8cf en radial-gradient)
      restent telles quelles : c'est le grain du papier dessiné, pas du
      texte. Un audit automatique les compte comme un couple à 1,11:1 ;
      elles ne portent aucune information et le seuil ne s'y applique pas.
      Idem pour l'intérieur de la maquette du livre, qui est l'image d'un
      document et non l'interface.
═══════════════════════════════════════════════════════════════ */

:root {
  --gold-300: #e5bb6b;
  --gold-500: #bd8b17;
  --gold-700: #765400;

  /* L'or quand il est encre sur fond clair. Identique au jeton de
     custom-fixes.css : le site n'a qu'un seul or de texte. */
  --gold-text: #7a5800;

  --warm-300: #d6d1ca;
  --warm-600: #68645e;
  --warm-700: #4e4a45;
  --warm-800: #35322d;

  /* Encre principale, chaude. Identique au jeton de custom-fixes.css ;
     redéclarée ici parce que roadmap.html ne charge que cette feuille. */
  --ink: #1c1917;
}

/* ── a) L'or comme encre sur fond clair ────────────────────────── */

.rm-value__num,
.rm-required,
.rm-eyebrow .au-icon,
.rm-reassure .au-icon {
  color: var(--gold-text);
}

.rm-back:hover,
.rm-back:focus-visible,
.rm-success__fallback a:hover,
.rm-success__fallback a:focus-visible {
  color: var(--gold-text);
}

/* ── b) Gris froids → rampe chaude ─────────────────────────────── */

.rm-reassure {
  color: var(--warm-600);
}

.rm-back {
  color: var(--warm-700);
}

.rm-field label {
  color: var(--warm-800);
}

/* ═══════════════════════════════════════════════════════════════
   TROIS COUPLES MESURÉS SUR LA PAGE RENDUE

   Cette page ne charge que roadmap.css : les corrections faites dans
   custom-fixes.css ne l'atteignent pas, et ces trois défauts lui sont
   propres.

   a) .rm-eyebrow — la pastille "EXCLUSIF POUR LES DIRIGEANTS…", en
      --brand-gold-deep (#a97a12) sur son fond doré à 10 % : 3,83:1 pour
      4,5:1 exigés. Elle est en 11px capitales espacées, la taille où la
      marge compte le plus. Passage à --gold-text : 5,75:1 sur ce fond.

   b) .rm-subtitle — le surtitre "Au sommaire" en #9f9f9f sur blanc :
      2,65:1. Même défaut et même correction que .sub-title sur la page
      d'accueil : le rôle est un accent, le site a un or pour ça.

   c) .rm-footer — la ligne de copyright en blanc à 44 % d'opacité sur
      #0a0a0a, soit 4,35:1. À 13px ce n'est pas du grand texte. 64 %
      la porte à 8,23:1 sans la rendre plus lourde que les liens voisins.

   d) Le chevron du surtitre portait le même sarcelle #113c3d que la
      page d'accueil, et son plan avant était blanc — donc invisible sur
      fond blanc. Les deux passent dans la famille de l'or.
═══════════════════════════════════════════════════════════════ */

.rm-eyebrow {
  color: var(--gold-text);
}

.rm-subtitle {
  color: var(--gold-text);
}

.rm-footer__inner > p {
  color: rgba(255, 255, 255, 0.64);
}

.rm-subtitle .triangle1 {
  border-left-color: var(--gold-500);
}

.rm-subtitle .triangle2 {
  border-left-color: var(--gold-700);
}

/* Dernière encre froide de la page : la saisie des champs était en
   #1a1e27 (bleu-noir). Même traitement que les champs de la page
   d'accueil. L'intérieur de la maquette du livre garde ses valeurs :
   c'est l'image d'un document imprimé, pas l'interface. */
.rm-input {
  color: var(--ink);
}