/* ═══════════════════════════════════════════════════════════════════════════
   NESTWO — FEUILLE DE LA NOUVELLE PAGE D'ACCUEIL (route d'aperçu)
   ───────────────────────────────────────────────────────────────────────────
   Feuille AUTONOME, servie uniquement par `web/apercu-landing.html`. Elle ne
   partage rien avec `site.css` sauf les jetons de marque, qu'elle redéclare
   sous son propre préfixe : toucher `site.css` imposerait de bumper `?v=`
   sur 84 fichiers (CLAUDE.md), et surtout ferait porter à tout le site les
   essais d'une page en préparation.

   PARTI PRIS. L'ancienne page est crème, éditoriale, et raconte une histoire
   au défilement. Celle-ci part de l'inverse : un bureau de nuit, et des
   PIÈCES posées dessus. Le fond est le navy le plus sombre de la charte ;
   tout ce qui compte est du papier clair, posé en relief, aux dimensions
   d'un vrai document. Le produit tient un dossier : la page montre le
   dossier, pas des arguments.

   Préfixe `nl-` (« nouvelle landing ») : aucune collision possible avec les
   classes de `site.css`, qui habille encore l'en-tête et le pied.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Jetons de marque — mêmes valeurs que site.css, nommées à part pour que
     cette page ne dépende d'aucune de ses évolutions. */
  --nl-night: #0B1220;
  --nl-night-2: #111C31;
  --nl-night-3: #16233C;
  --nl-ink: #1A1A2E;
  --nl-gold: #E8A838;
  --nl-gold-lit: #F59E0B;
  --nl-gold-text: #B45309;
  --nl-paper: #FAF6EF;       /* crème de marque — site.css `--cream` */
  --nl-paper-2: #F2EADC;
  --nl-ivoire: #FDFAF2;      /* le papier des cartes, un cran plus clair */
  --nl-ivoire-2: #F6F0E2;    /* les aplats internes (en-têtes de tableau) */
  --nl-green-text: #047857;
  --nl-rule: rgba(255, 255, 255, 0.10);
  --nl-rule-strong: rgba(255, 255, 255, 0.20);
  --nl-dim: rgba(234, 238, 248, 0.64);
  --nl-dim-2: rgba(234, 238, 248, 0.42);
  --nl-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --nl-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Pas de police tierce : la pile système porte les étiquettes de registre.
     Un chiffre tabulaire aligné vaut une police de plus qu'on ne charge pas. */
  --nl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --nl-pad: 24px;
}

/* ── Socle ──────────────────────────────────────────────────────────────── */

body.nl-body {
  background: var(--nl-night);
  color: #EAEEF8;
  font-family: var(--nl-sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden; /* aucune maquette ne doit pouvoir élargir la page */
}
/* `:where()` annule la spécificité : sans lui, cette ligne gagnait contre
   `.nl-act--gold` et repeignait le texte du bouton principal en clair sur or.
   Relevé au premier rendu mobile. */
:where(body.nl-body) a { color: inherit; }

.nl-wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--nl-pad); }

/* Les bandes alternent nuit / papier. La séparation est un filet d'or d'un
   pixel — pas un arc, pas une vague : un document a des bords droits. */
.nl-band { padding: 88px 0; position: relative; }
.nl-band--paper { background: var(--nl-paper); color: var(--nl-ink); }
.nl-band--deep { background: var(--nl-night-2); }
.nl-band + .nl-band { border-top: 1px solid var(--nl-rule); }
.nl-band--paper + .nl-band,
.nl-band + .nl-band--paper { border-top: 1px solid rgba(232, 168, 56, 0.45); }

/* ── Étiquettes, titres, textes ─────────────────────────────────────────── */

.nl-label {
  font-family: var(--nl-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nl-gold);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nl-label::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--nl-gold);
  flex: none;
}
.nl-band--paper .nl-label { color: var(--nl-gold-text); }
.nl-band--paper .nl-label::before { background: var(--nl-gold-text); }

.nl-h2 {
  font-family: var(--nl-serif);
  font-weight: 600;
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
  max-width: 24ch;
}
.nl-h2--wide { max-width: 34ch; }
.nl-lead {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--nl-dim);
  max-width: 62ch;
}
.nl-band--paper .nl-lead { color: #50515F; }
.nl-fine {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--nl-dim-2);
  max-width: 70ch;
}
.nl-band--paper .nl-fine { color: #6B6C7B; }

/* ── Boutons ────────────────────────────────────────────────────────────── */

.nl-act {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  padding: 15px 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.nl-act--gold {
  background: linear-gradient(180deg, var(--nl-gold-lit), var(--nl-gold));
  color: #1A1A2E;
  box-shadow: 0 10px 26px rgba(245, 158, 11, 0.28);
}
.nl-act--gold:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(245, 158, 11, 0.34); }
.nl-act--line {
  border-color: var(--nl-rule-strong);
  color: #EAEEF8;
  background: rgba(255, 255, 255, 0.03);
}
.nl-act--line:hover { background: rgba(255, 255, 255, 0.08); }
.nl-band--paper .nl-act--line { border-color: #DCD3C2; color: var(--nl-ink); background: var(--nl-ivoire); }
.nl-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ── 1. OUVERTURE ───────────────────────────────────────────────────────── */

.nl-hero {
  position: relative;
  padding: 76px 0 92px;
  background:
    radial-gradient(900px 420px at 78% 8%, rgba(232, 168, 56, 0.16), transparent 70%),
    linear-gradient(180deg, var(--nl-night) 0%, var(--nl-night-2) 100%);
  overflow: hidden;
}
/* Trame de papier millimétré, très faible : le fond d'un bureau, pas un motif. */
.nl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(1000px 500px at 20% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(1000px 500px at 20% 0%, #000, transparent 75%);
  pointer-events: none;
}
.nl-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 56px;
  align-items: center;
}
.nl-hero__flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--nl-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--nl-gold);
  border: 1px solid rgba(232, 168, 56, 0.4);
  background: rgba(232, 168, 56, 0.08);
  padding: 7px 13px;
  border-radius: 999px;
}
.nl-hero__flag i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--nl-gold); flex: none;
}
.nl-hero h1 {
  font-family: var(--nl-serif);
  font-weight: 600;
  font-size: clamp(34px, 5.1vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 22px 0 0;
  /* 23ch : le titre fait deux lignes, une par proposition. À 17ch il en
     faisait trois et la seconde se coupait au milieu. */
  max-width: 23ch;
}
.nl-hero h1 em { font-style: normal; color: var(--nl-gold); }
.nl-hero__sub {
  margin-top: 22px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--nl-dim);
  max-width: 48ch;
}
.nl-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.nl-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #3C3D4F;
}
.nl-list li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--nl-gold);
  margin-top: 8px;
}
.nl-panel .nl-list li { color: var(--nl-dim); }
.nl-shot {
  border: 1px solid var(--nl-rule-strong);
  border-radius: 8px;
  overflow: hidden;
  background: #0B1220;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.nl-shot img { display: block; width: 100%; height: auto; }
.nl-shot figcaption {
  font-family: var(--nl-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nl-dim-2);
  padding: 9px 14px;
  border-top: 1px solid var(--nl-rule);
}
.nl-money__paid .nl-list li { color: rgba(234, 238, 248, 0.82); }

/* ── 7. L'ACCÈS ─────────────────────────────────────────────────────────── */

.nl-access { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.nl-open { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.nl-open a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  border: 1px solid var(--nl-rule);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 15.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.025);
}
.nl-open a:hover { border-color: rgba(232, 168, 56, 0.5); background: rgba(232, 168, 56, 0.07); }
.nl-open small { display: block; font-weight: 400; font-size: 13.5px; color: var(--nl-dim-2); margin-top: 2px; }
.nl-open i { color: var(--nl-gold); font-size: 18px; font-style: normal; }

/* Le bloc d'invitation reprend les classes `nw-cap*` du site : c'est le même
   engagement, la même mention RGPD, le même script au remplacement. */
.nl-invite { border: 1px solid rgba(232, 168, 56, 0.35); border-radius: 8px; background: linear-gradient(180deg, rgba(232, 168, 56, 0.1), rgba(232, 168, 56, 0.02)); padding: 26px; }
.nl-invite form { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.nl-invite input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 13px 14px;
  border-radius: 6px;
  border: 1px solid var(--nl-rule-strong);
  background: rgba(0, 0, 0, 0.28);
  color: #EAEEF8;
}
.nl-invite input[type="email"]::placeholder { color: rgba(234, 238, 248, 0.38); }
.nl-invite .nw-cap__hp { position: absolute; left: -9999px; }
.nl-invite p.nl-fine a { color: var(--nl-gold); }

/* ── Révélation au défilement ───────────────────────────────────────────── */

.nl-up { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.nl-up.nl-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nl-up { opacity: 1; transform: none; transition: none; }
  .nl-act:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ── Tablette ───────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .nl-hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .nl-hero h1 { max-width: 22ch; }
  .nl-access { grid-template-columns: 1fr; gap: 34px; }
}

/* ── Téléphone ──────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
  :root { --nl-pad: 16px; }
  body.nl-body { font-size: 16px; }
  .nl-band { padding: 60px 0; }
  .nl-hero { padding: 48px 0 64px; }
  .nl-acts { gap: 10px; }
  .nl-acts .nl-act { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PASSE 2 — CONVERSION ET PREUVE PAR LE PRODUIT (26 octobre 2026)
   ───────────────────────────────────────────────────────────────────────────
   La première version vendait un registre. Elle était belle et elle rétrécissait
   le produit : un bailleur ne cherche pas un classeur, il cherche à ne pas
   rater l'échéance et à ne pas y passer ses dimanches. Ces composants-ci
   portent la démonstration — l'écran reconstitué, les paliers de prix, le
   constat de départ — et quelques correctifs d'accessibilité.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Accès clavier ──────────────────────────────────────────────────────────
   La page n'avait ni lien d'évitement ni anneau de focus visible : au clavier,
   on traversait 40 liens de méga-menu avant d'atteindre le titre, sans jamais
   voir où l'on était. */
.nl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--nl-gold);
  color: #1A1A2E;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 0 0 6px 0;
}
.nl-skip:focus { left: 0; }
body.nl-body :is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--nl-gold);
  outline-offset: 3px;
  border-radius: 3px;
}
.nl-band--paper :is(a, button):focus-visible { outline-color: var(--nl-gold-text); }
.nl-band:not(.nl-band--paper) .nl-st--beta { color: var(--nl-gold); }

/* ── Les trois paliers de prix, dans l'ordre où on se les demande ─────────── */
.nl-money3 { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.nl-plan {
  border: 1px solid #E8E0D1;
  border-radius: 8px;
  background: var(--nl-ivoire);
  padding: 22px;
  height: 100%;
  display: flex; flex-direction: column;
}
.nl-plan--now { border-color: rgba(232, 168, 56, 0.55); background: linear-gradient(180deg, #FFF8E8, var(--nl-ivoire)); }
.nl-plan--later { background: var(--nl-ink); color: #EAEEF8; border-color: transparent; }
.nl-plan__when {
  font-family: var(--nl-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--nl-gold-text);
}
.nl-plan--later .nl-plan__when { color: var(--nl-gold); }
.nl-plan h3 { font-family: var(--nl-serif); font-size: 20px; font-weight: 600; line-height: 1.25; margin-top: 8px; }
.nl-plan > p { margin-top: 9px; font-size: 14.5px; line-height: 1.55; color: #585969; }
.nl-plan--later > p { color: rgba(234, 238, 248, 0.68); }
.nl-plan--later .nl-list li { color: rgba(234, 238, 248, 0.84); }
.nl-plan__note { margin-top: auto; padding-top: 16px; font-size: 13px; line-height: 1.5; color: #6B6C7B; }
.nl-plan--later .nl-plan__note { color: rgba(234, 238, 248, 0.5); }
.nl-plan--later .nl-plan__note a { color: var(--nl-gold); }
.nl-tarif { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 11px; }
.nl-tarif li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.nl-tarif li:last-child { border-bottom: 0; padding-bottom: 0; }
.nl-tarif b { font-family: var(--nl-mono); font-size: 14.5px; color: var(--nl-gold); white-space: nowrap; }
.nl-tarif small { display: block; font-size: 12.5px; color: rgba(234, 238, 248, 0.55); margin-top: 2px; }

@media (max-width: 1000px) {
  .nl-money3 { grid-template-columns: 1fr; }
}

/* ── Contraste sur la bande claire ──────────────────────────────────────────
   Les couleurs `--nl-dim*` sont faites pour le fond nuit. Deux blocs de la
   démonstration vivent sur le papier et les héritaient : le texte des étapes
   et la mention « maquette » sortaient en gris très clair sur crème — relevé
   au contrôle visuel du 26/10/2026, illisible à l'écran comme au test de
   contraste. */
.nl-band--paper .nl-beats p { color: #585969; }
.nl-band--paper .nl-maquette { color: #6B6C7B; }
.nl-band--paper .nl-maquette b { color: var(--nl-gold-text); }

/* Les deux premières cartes de prix sont du papier posé sur la bande nuit :
   sans couleur d'encre explicite, leurs titres héritaient du texte clair de la
   bande et sortaient presque blancs sur blanc. Même défaut de principe que les
   étapes de la démonstration, dans l'autre sens. */
.nl-plan { color: var(--nl-ink); }
.nl-plan--later { color: #EAEEF8; }
.nl-plan--later h3 { color: #EAEEF8; }

/* ═══════════════════════════════════════════════════════════════════════════
   PASSE 3 — LE PARCOURS EN HUIT ÉTAPES (26 octobre 2026)
   ───────────────────────────────────────────────────────────────────────────
   La page défendait une promesse puis l'illustrait. Elle raconte maintenant un
   ORDRE : de la mise en location à la relocation, huit étapes dans le sens où
   elles arrivent. Chaque étape tient en trois phrases — problème, réponse, lien
   — et porte une maquette qui montre l'écran plutôt que de le décrire.

   Ce que ces composants remplacent : les trois cartes « temps », la grille des
   limites, le constat en pastilles, la démonstration unique. Tout cela vivait
   dans cette feuille et nulle part ailleurs.

   LA VARIATION EST RÉGLÉE, PAS LIBRE. Trois compositions seulement — maquette
   à droite, maquette à gauche, maquette pleine largeur — réparties pour qu'une
   même disposition ne se répète jamais deux fois de suite, et quatre bandes
   (nuit, papier, nuit, papier) au lieu de huit : sans quoi huit étapes font
   huit sites.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Rythme vertical : généreux, et constant ─────────────────────────────── */
.nl-band { padding: 112px 0; }
.nl-hero { padding: 84px 0 112px; }

/* ── Une étape ──────────────────────────────────────────────────────────── */
.st {
  /* L'ancre doit déposer le titre sous l'en-tête ET sous la frise collante,
     soit 73 + 96 px, plus une respiration. Mesuré dans le navigateur, pas
     estimé : à 92 px le titre passait derrière la frise. */
  scroll-margin-top: 186px;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 72px;
  /* `start`, et non `center` : centré, le texte d'une étape à grande maquette
     descendait de cinq cents pixels, si bien qu'un clic sur l'ancre déposait le
     visiteur sur une section dont le titre était sous la ligne de flottaison.
     Mesuré au navigateur : 734 px au lieu de 186. */
  align-items: start;
}
.st + .st { margin-top: 104px; padding-top: 104px; border-top: 1px solid var(--nl-rule); }
.nl-band--paper .st + .st { border-top-color: #E8E0D1; }
/* Composition inversée : la maquette passe à gauche. Les colonnes s'inversent
   AVEC elle — en ne changeant que l'ordre, la maquette héritait de la colonne
   étroite et le texte de la large, soit exactement l'inverse de l'intention. */
.st--flip { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.st--flip > .st__said { order: 2; }
.st--flip > .st__shown { order: 1; }
/* Composition pleine largeur : le texte au-dessus, la maquette en dessous et
   plus large — réservée aux écrans qui ont le plus à montrer. */
.st--wide { grid-template-columns: 1fr; gap: 48px; }
.st--wide .st__said { max-width: 60ch; }

.st__no {
  font-family: var(--nl-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nl-gold);
  display: flex;
  align-items: center;
  gap: 12px;
}
.st__no::after { content: ""; height: 1px; width: 44px; background: rgba(232, 168, 56, 0.5); }
.nl-band--paper .st__no { color: var(--nl-gold-text); }
.nl-band--paper .st__no::after { background: rgba(180, 83, 9, 0.35); }

.st h2 {
  font-family: var(--nl-serif);
  font-weight: 600;
  font-size: clamp(25px, 2.6vw, 33px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin-top: 16px;
  max-width: 19ch;
}
.st__pb {
  margin-top: 22px;
  padding-left: 17px;
  border-left: 2px solid rgba(232, 168, 56, 0.55);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--nl-dim);
  max-width: 48ch;
}
.nl-band--paper .st__pb { color: #585969; border-left-color: rgba(180, 83, 9, 0.4); }
.st__fix { margin-top: 20px; font-size: 16.5px; line-height: 1.68; max-width: 50ch; }
.nl-band--paper .st__fix { color: #3C3D4F; }
.st__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--nl-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.st__more:hover { border-bottom-color: currentColor; }
.nl-band--paper .st__more { color: var(--nl-gold-text); }
.st__none {
  margin-top: 24px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nl-dim-2);
  max-width: 46ch;
}
.nl-band--paper .st__none { color: #6B6C7B; }

/* ── Le socle commun des maquettes ───────────────────────────────────────── */
.mk {
  background: var(--nl-ivoire);
  color: var(--nl-ink);
  border: 1px solid #E4DCCB;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
}
.nl-band--paper .mk { box-shadow: 0 16px 40px rgba(26, 26, 46, 0.09); }
.mk__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--nl-ink);
  color: #EAEEF8;
  padding: 12px 17px;
  font-size: 13.5px;
}
.mk__bar b { font-weight: 650; }
.mk__bar span {
  font-family: var(--nl-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(234, 238, 248, 0.5);
  white-space: nowrap;
}
.mk__body { padding: 22px; }
.mk__h {
  font-family: var(--nl-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B6C7B;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.mk__h + * { margin-top: 14px; }
.mk__foot {
  border-top: 1px dashed #E4DCCB;
  margin-top: 18px;
  padding-top: 15px;
  font-size: 13px;
  color: #6B6C7B;
  line-height: 1.55;
}

/* Rangée générique : intitulé à gauche, état à droite. */
.mk-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #EDE4D2;
}
.mk-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mk-row__t { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.mk-row__s { font-size: 12.5px; color: #6B6C7B; margin-top: 4px; line-height: 1.45; }
.mk-row__v { font-family: var(--nl-mono); font-size: 12px; color: #6B6C7B; white-space: nowrap; }

.mk-b {
  font-family: var(--nl-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.mk-b--ok { background: rgba(16, 185, 129, 0.15); color: #047857; }
.mk-b--wait { background: rgba(245, 158, 11, 0.16); color: #B45309; }
.mk-b--info { background: rgba(59, 130, 246, 0.12); color: #1E40AF; }
.mk-b--off { background: #EDE4D2; color: #6B6C7B; }

/* Bouton de maquette — il ne fait rien, et il ne doit pas prétendre le
   contraire : pas de curseur « main », pas d'effet au survol. */
.mk-act {
  font-size: 12.5px;
  font-weight: 700;
  background: linear-gradient(180deg, var(--nl-gold-lit), var(--nl-gold));
  color: #1A1A2E;
  border-radius: 5px;
  padding: 9px 13px;
  white-space: nowrap;
}

/* Étape 1 — l'annonce et ses candidatures */
.mk-ad { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; }
.mk-ad__img {
  border-radius: 6px;
  padding-top: 76%;
  background: linear-gradient(135deg, #E3DACA 0%, #CFC5B2 60%, #DCD3C2 100%);
}
.mk-ad__t { font-family: var(--nl-serif); font-size: 18px; font-weight: 600; line-height: 1.25; }
.mk-ad__m { margin-top: 6px; font-size: 13px; color: #6B6C7B; }
.mk-ad__p { margin-top: 9px; font-size: 17px; font-weight: 700; }
.mk-ad__p small { font-size: 12.5px; font-weight: 500; color: #6B6C7B; }

/* Étape 3 — le calendrier des demandes de visite */
.mk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mk-cal i {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 5px;
  font-style: normal;
  font-size: 12px;
  color: #8D8E9C;
  background: var(--nl-ivoire-2);
}
.mk-cal i.is-on { background: var(--nl-ink); color: #FBFAF7; font-weight: 700; }
.mk-cal i.is-dot { background: rgba(245, 158, 11, 0.18); color: #B45309; font-weight: 700; }
.mk-cal__d {
  font-family: var(--nl-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A8A396;
  text-align: center;
  padding-bottom: 2px;
}

/* Étape 4 — l'aperçu du bail */
.mk-doc { display: grid; gap: 9px; }
.mk-doc i { display: block; height: 7px; border-radius: 2px; background: #EDE4D2; }
.mk-doc i:nth-child(2) { width: 94%; }
.mk-doc i:nth-child(3) { width: 78%; }
.mk-doc i:nth-child(4) { width: 88%; }
.mk-doc i:nth-child(5) { width: 62%; }
.mk-sig { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.mk-sig div { border: 1px dashed #DCD3C2; border-radius: 6px; padding: 12px 13px; }
.mk-sig b {
  display: block;
  font-family: var(--nl-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8D8E9C;
}
.mk-sig span { display: block; margin-top: 7px; font-family: var(--nl-serif); font-size: 17px; color: #2B3356; }
.mk-sig em { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px; color: #6B6C7B; }

/* Étape 5 — les pièces de l'état des lieux */
.mk-ph { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.mk-ph i {
  display: block;
  padding-top: 72%;
  border-radius: 4px;
  background: linear-gradient(135deg, #E9E2D4, #D3C9B6);
}

/* Étape 7 — la comparaison entrée / sortie */
.mk-cmp { display: grid; grid-template-columns: 1fr 26px 1fr; gap: 12px; align-items: center; }
.mk-cmp__c { border: 1px solid #EDE4D2; border-radius: 7px; padding: 14px; background: var(--nl-ivoire); }
.mk-cmp__c b {
  font-family: var(--nl-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8D8E9C;
}
.mk-cmp__c i { display: block; padding-top: 58%; border-radius: 4px; margin-top: 10px; background: linear-gradient(135deg, #E9E2D4, #D3C9B6); }
.mk-cmp__c span {
  display: block; margin-top: 10px; font-size: 13px; line-height: 1.4;
  /* Deux lignes réservées : sans ça, la colonne dont l'observation tient sur
     une ligne est plus courte que l'autre, et la comparaison — dont tout
     l'intérêt est la symétrie — paraît bancale. */
  min-height: 2.8em;
}
.mk-cmp__x { text-align: center; color: var(--nl-gold-text); font-size: 17px; }

/* Étape 8 — les deux avis scellés */
.mk-seal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mk-seal div { border: 1px solid #EDE4D2; border-radius: 7px; padding: 15px; background: var(--nl-ivoire); }
.mk-seal b {
  display: block;
  font-family: var(--nl-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8D8E9C;
}
.mk-seal p { margin-top: 9px; font-size: 13px; line-height: 1.5; color: #3C3D4F; }
.mk-seal .mk-b { margin-top: 11px; display: inline-block; }
.mk-hidden { filter: blur(3.5px); user-select: none; }

/* L'étiquette « maquette » — elle n'est pas facultative. */
.mk-note {
  margin-top: 14px;
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nl-dim-2);
  max-width: 56ch;
}
.mk-note b {
  font-family: var(--nl-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nl-gold);
  flex: none;
}
.nl-band--paper .mk-note { color: #6B6C7B; }
.nl-band--paper .mk-note b { color: var(--nl-gold-text); }

/* ── La bascule vers les tarifs ─────────────────────────────────────────── */
.cl { text-align: center; max-width: 46ch; margin: 0 auto; }
.cl h2 {
  font-family: var(--nl-serif);
  font-weight: 600;
  font-size: clamp(27px, 3.6vw, 39px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.cl p { margin-top: 20px; font-size: 17.5px; line-height: 1.65; color: var(--nl-dim); }
.cl .nl-acts { justify-content: center; }

/* ── Tablette ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .nl-band { padding: 86px 0; }
  .st { grid-template-columns: 1fr; gap: 40px; }
  .st--flip > .st__said { order: 1; }
  .st--flip > .st__shown { order: 2; }
  .st + .st { margin-top: 72px; padding-top: 72px; }
  .st h3 { max-width: 24ch; }
}

/* ── Téléphone ──────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .nl-band { padding: 68px 0; }
  .nl-hero { padding: 44px 0 64px; }
  .st + .st { margin-top: 56px; padding-top: 56px; }
  .st { gap: 32px; }
    .mk__body { padding: 17px; }
  .mk-ad { grid-template-columns: 84px 1fr; gap: 13px; }
  .mk-sig, .mk-seal { grid-template-columns: 1fr; }
  .mk-cmp { grid-template-columns: 1fr; }
  .mk-cmp__x { transform: rotate(90deg); }
  .mk-ph { grid-template-columns: repeat(3, 1fr); }
  .mk-row { grid-template-columns: 1fr; gap: 8px; }
  .mk-row > :last-child { justify-self: start; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BARRE D'ACTION — TÉLÉPHONE UNIQUEMENT
   ───────────────────────────────────────────────────────────────────────────
   Sur un écran de téléphone, les huit étapes font près de six mille pixels :
   le bouton du hero est hors d'atteinte dès la deuxième étape. Cette barre le
   remet à portée, et dit sur elle-même la condition d'accès — « gratuit »
   seul, sans la bêta, serait un demi-mot.

   Elle s'efface au-dessus de 680 px (le bouton du hero y reste proche) et
   disparaît à l'approche du pied de page, où elle recouvrirait précisément le
   formulaire qu'elle sert à atteindre.
   ═══════════════════════════════════════════════════════════════════════════ */
.fab { display: none; }

@media (max-width: 680px) {
  .fab {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(11, 18, 32, 0), rgba(11, 18, 32, 0.92) 38%);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .fab[data-cache="1"] { transform: translateY(130%); opacity: 0; pointer-events: none; }
  .fab__a {
    display: block;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(180deg, var(--nl-gold-lit), var(--nl-gold));
    color: #1A1A2E;
    border-radius: 8px;
    /* 56 px de haut au minimum : une cible tactile confortable. */
    padding: 12px 18px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
  }
  .fab__a span { display: block; font-size: 16px; font-weight: 700; }
  .fab__a small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; opacity: 0.78; }
  /* De la place sous le dernier contenu, pour que la barre ne couvre jamais le
     pied de page ni le dernier lien. */
  body.nl-body { padding-bottom: 88px; }
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   LES CROCHETS DE L'ACCUEIL
   ───────────────────────────────────────────────────────────────────────────
   `hh-cta`, `hh-alt`, `hh-fork*` et `msticky` sont les classes que les gardes
   de l'accueil reconnaissent (`cta_mobile_aligne`, `single_fork_guard`). Elles
   ne sont stylées nulle part dans `site.css` : ce sont des points d'ancrage,
   pas un habillage. On ne reprend donc que ce qui manque — la grille de
   l'aiguillage — et le bouton principal garde son apparence.
   ═══════════════════════════════════════════════════════════════════════════ */

/* L'aiguillage : trois situations que les deux boutons ne couvrent pas. Posé
   sous les actions, en retrait, pour qu'il réponde à « et si ce n'est pas mon
   cas ? » sans concurrencer l'action principale. */
.hh-fork__q {
  margin-top: 34px;
  font-family: var(--nl-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nl-dim-2);
}
.hh-fork__grid {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.hh-fork__grid a {
  font-size: 15px;
  color: var(--nl-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 2px;
}
.hh-fork__grid a:hover { color: #EAEEF8; border-bottom-color: var(--nl-gold); }

/* Les liens « à lire aussi » d'une étape : une ligne, en retrait, qui envoie
   vers la page qui traite l'ennui dont l'étape parle. */
.st__also {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--nl-dim-2);
  max-width: 48ch;
}
.st__also a { color: var(--nl-dim); text-decoration: underline; text-underline-offset: 2px; }
.st__also a:hover { color: var(--nl-gold); }
.nl-band--paper .st__also { color: #6B6C7B; }
.nl-band--paper .st__also a { color: #50515F; }
.nl-band--paper .st__also a:hover { color: var(--nl-gold-text); }

/* La mention de bêta sous la barre d'action du téléphone : elle a quitté le
   bouton (son libellé doit rester celui du bouton principal, au mot près) sans
   quitter l'écran. */
.fab__n { display: none; }
@media (max-width: 680px) {
  .fab__n {
    display: block;
    text-align: center;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(234, 238, 248, 0.72);
  }
  .fab__a { font-size: 16px; font-weight: 700; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES TARIFS EN CARTES DIFFÉRENTIELLES
   ───────────────────────────────────────────────────────────────────────────
   Trois colonnes de prose demandaient de lire pour comparer. Quatre cartes
   disent chacune ce qu'elle AJOUTE à la précédente : « tout le gratuit,
   plus… », « tout l'à la carte, plus… ». Le visiteur ne relit pas ce qu'il
   vient de lire, et la progression se voit sans être expliquée.

   L'ordre des lignes de Sérénité n'est pas cosmétique : le suivi d'abord, les
   signatures en DERNIER. Vendre l'abonnement par le nombre de signatures est
   le cadrage écarté par l'ADR 0014, et `pricing_frontier_test` le refuse.
   ═══════════════════════════════════════════════════════════════════════════ */

.pc-beta {
  margin-top: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--nl-dim);
  border-left: 2px solid var(--nl-gold);
  padding-left: 16px;
  max-width: 62ch;
}
.pc-beta strong { color: var(--nl-gold); }

.pc-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.pc {
  background: var(--nl-ivoire);
  color: var(--nl-ink);
  border: 1px solid #E4DCCB;
  border-radius: 10px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
}
/* La carte conseillée : un filet d'or et un fond à peine plus chaud. Pas de
   mise à l'échelle — une carte plus grande que les autres déséquilibre la
   ligne et fait disparaître la dernière sous la ligne de flottaison. */
.pc--phare {
  border-color: rgba(232, 168, 56, 0.55);
  background: linear-gradient(180deg, #FFF8E8, var(--nl-ivoire));
  box-shadow: 0 14px 34px rgba(26, 26, 46, 0.10);
}
.pc__nom {
  font-family: var(--nl-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nl-gold-text);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pc__nom b {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  background: rgba(232, 168, 56, 0.2);
  color: #8A5A08;
  border-radius: 3px;
  padding: 3px 7px;
}
.pc__prix {
  font-family: var(--nl-serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 14px;
}
.pc__prix span {
  display: block;
  font-family: var(--nl-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: #6B6C7B;
  margin-top: 7px;
}
.pc__sous {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #50515F;
}
.pc__plus {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #EDE4D2;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nl-gold-text);
}
.pc__liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 11px; }
.pc__liste li {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: #3C3D4F;
}
.pc__liste li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--nl-gold);
  margin-top: 8px;
}
.pc__note {
  margin-top: auto;
  padding-top: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6B6C7B;
}

@media (max-width: 1000px) {
  .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 680px) {
  .pc-grid { grid-template-columns: 1fr; }
  .pc { padding: 22px 20px; }
  .pc__prix { font-size: 30px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LE HERO SANS MAQUETTE
   ───────────────────────────────────────────────────────────────────────────
   La maquette du hero répétait ce que les huit étapes montrent juste après,
   et sur téléphone elle repoussait les boutons sous la ligne de flottaison.
   Retirée, le hero redevient ce qu'il doit être : une phrase, deux actions.
   Colonne unique et centrée — sur une seule colonne, l'alignement à gauche
   laisse un vide à droite que rien ne vient tenir.
   ═══════════════════════════════════════════════════════════════════════════ */
.nl-hero__seul {
  position: relative;
  z-index: 1;
  max-width: 840px;
  text-align: center;
}
.nl-hero__seul .nl-hero__flag { display: inline-flex; }
.nl-hero__seul h1 { max-width: none; margin-left: auto; margin-right: auto; }
.nl-hero__seul .nl-hero__sub { max-width: 58ch; margin-left: auto; margin-right: auto; }
.nl-hero__seul .nl-acts { justify-content: center; }
.nl-hero__seul .hh-alt { max-width: 64ch; margin-left: auto; margin-right: auto; }
.nl-hero__seul .hh-fork__q { justify-content: center; }
.nl-hero__seul .hh-fork__grid { justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   UNE ÉTAPE TIENT DANS UN ÉCRAN
   ───────────────────────────────────────────────────────────────────────────
   La règle : on ne doit pas défiler pour voir une étape en entier. Trois
   leviers, dans cet ordre — la composition (plus d'étape pleine largeur, donc
   le texte et la maquette côte à côte au lieu d'être empilés), la hauteur des
   bandes, et la densité des maquettes. Les hauteurs sont mesurées au
   navigateur après coup, pas estimées.
   ═══════════════════════════════════════════════════════════════════════════ */
.nl-band { padding: 80px 0; }
.st { scroll-margin-top: 96px; gap: 56px; }
.st + .st { margin-top: 72px; padding-top: 72px; }
.st h2 { font-size: clamp(24px, 2.3vw, 30px); margin-top: 14px; }
.st__pb { margin-top: 16px; font-size: 16px; }
.st__fix { margin-top: 16px; font-size: 16px; line-height: 1.6; }
.st__more { margin-top: 18px; }
.st__also { margin-top: 12px; }

/* Les maquettes : même densité, moins de place perdue. */
.mk__body { padding: 18px; }
.mk-row { padding: 11px 0; }
.mk-row__t { font-size: 14px; }
.mk-row__s { font-size: 12px; margin-top: 3px; }
.mk__foot { margin-top: 14px; padding-top: 12px; font-size: 12px; }
.mk-note { margin-top: 10px; font-size: 12px; }
.mk-ph { margin-top: 12px; }
.mk-ph i { padding-top: 62%; }
.mk-sig { margin-top: 14px; }
.mk-cal i { font-size: 11px; }

@media (max-width: 1000px) {
  .nl-band { padding: 64px 0; }
  .st + .st { margin-top: 56px; padding-top: 56px; }
  .st { gap: 28px; }
}
@media (max-width: 680px) {
  .nl-band { padding: 52px 0; }
  .st + .st { margin-top: 44px; padding-top: 44px; }
  .st { gap: 22px; }
  .nl-hero__seul { text-align: left; }
  .nl-hero__seul .nl-acts, .nl-hero__seul .hh-fork__q,
  .nl-hero__seul .hh-fork__grid { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — UNE ÉTAPE, UN ÉCRAN, SANS RIEN CACHER
   ───────────────────────────────────────────────────────────────────────────
   Sur 375 × 812, le texte et la maquette s'empilent : 739 px utiles pour un
   titre, deux phrases, deux liens et un écran de produit. On y arrive en
   serrant la densité — jamais en masquant des lignes. Une maquette dont on
   cache la moitié sur téléphone ne démontre plus rien, et ce que le visiteur
   ne voit pas, il ne peut pas le vérifier.

   Les comparaisons côte à côte (entrée/sortie, les deux avis scellés) RESTENT
   côte à côte : empilées, elles doublaient la hauteur et perdaient ce qui fait
   leur sens — la mise en regard.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .nl-hero { padding: 36px 0 48px; }
  .nl-hero h1 { font-size: clamp(30px, 8.4vw, 38px); }
  .nl-hero__sub { font-size: 16.5px; margin-top: 16px; }
  .nl-hero .nl-acts { margin-top: 26px; gap: 8px; }
  .nl-hero .nl-act { padding: 13px 20px; font-size: 15.5px; }
  .hh-fork__q { margin-top: 24px; }
  .hh-fork__grid { gap: 6px 18px; margin-top: 9px; }
  .hh-fork__grid a { font-size: 14px; }

  .st { gap: 14px; }
  .st h2 { font-size: 23px; margin-top: 10px; }
  .st__pb { margin-top: 12px; font-size: 15px; padding-left: 13px; }
  .st__fix { margin-top: 12px; font-size: 15px; line-height: 1.55; }
  .st__more { margin-top: 12px; font-size: 13px; }
  .st__also { margin-top: 7px; font-size: 12px; line-height: 1.5; }

  .mk__bar { padding: 10px 13px; font-size: 12.5px; }
  .mk__body { padding: 13px; }
  .mk__h { font-size: 9.5px; }
  .mk__h + * { margin-top: 10px; }
  .mk-row { padding: 9px 0; grid-template-columns: 1fr auto; gap: 10px; }
  .mk-row__t { font-size: 13px; }
  .mk-row__s { font-size: 11.5px; margin-top: 2px; }
  .mk-row > :last-child { justify-self: end; }
  .mk-b, .mk-act { font-size: 9px; padding: 3px 6px; }
  .mk-act { font-size: 11.5px; padding: 7px 10px; }
  .mk__foot { margin-top: 9px; padding-top: 9px; font-size: 10.5px; line-height: 1.45; }
  .mk-note { margin-top: 7px; font-size: 10.5px; }

  /* La mise en regard reste une mise en regard. */
  .mk-cmp { grid-template-columns: 1fr 18px 1fr; gap: 8px; }
  .mk-cmp__x { transform: none; font-size: 14px; }
  .mk-cmp__c { padding: 10px; }
  .mk-cmp__c span { font-size: 11.5px; margin-top: 7px; min-height: 3.4em; }
  .mk-cmp__c i { padding-top: 54%; margin-top: 7px; }
  .mk-seal { grid-template-columns: 1fr 1fr; gap: 9px; }
  .mk-seal div { padding: 11px; }
  .mk-seal p { font-size: 11.5px; margin-top: 7px; }

  .mk-ph { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
  .mk-ph i { padding-top: 52%; }
  .mk-ad { grid-template-columns: 72px 1fr; gap: 11px; }
  .mk-ad__t { font-size: 15px; }
  .mk-ad__p { font-size: 15px; margin-top: 6px; }
  .mk-doc { gap: 7px; }
  .mk-doc i { height: 6px; }
  .mk-sig { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
  .mk-sig div { padding: 9px 10px; }
  .mk-sig span { font-size: 15px; margin-top: 5px; }
  .mk-sig em { font-size: 10.5px; }
  .mk-cal { gap: 4px; }
  .mk-cal i { font-size: 10px; border-radius: 4px; }
}

/* Le maillage interne, regroupé en fin de page : une grille de liens brefs
   plutôt qu'une ligne glissée au milieu de chaque étape. */
.nl-liens {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 22px;
}
.nl-liens a {
  font-size: 14px;
  color: var(--nl-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding-bottom: 2px;
}
.nl-liens a:hover { color: #EAEEF8; border-bottom-color: var(--nl-gold); }
@media (max-width: 680px) { .nl-liens { grid-template-columns: 1fr; gap: 8px; } }

@media (max-width: 680px) {
  /* Le calendrier : des cases plus basses que larges. Carrées, les cinq
     semaines prenaient 225 px pour une information qui tient en 160. */
  .mk-cal i { aspect-ratio: 1.4; }
  .mk-row { padding: 7px 0; }
  .mk__bar { padding: 8px 12px; }
  .mk-ph i { padding-top: 44%; }
  .st__pb { margin-top: 10px; padding-left: 11px; }
  .st__fix { margin-top: 10px; }
  .mk-cmp__c span { min-height: 3.1em; }
}

@media (max-width: 680px) {
  /* Étape 7 : la mise en regard garde ses deux vignettes, un peu plus basses. */
  .mk-cmp__c i { padding-top: 46%; }
  .mk-cmp__c span { min-height: 2.6em; }
}