/* ===================================================================
   La page méthode : comment Ascendra vérifie les offres.
   -------------------------------------------------------------------
   Une page de lecture, pas un tableau de bord : une seule colonne,
   large de 68 caractères, et des sections nettement séparées. Rien n'y
   défile, rien n'y clignote, il n'y a rien à cliquer avant la fin.

   Le vert n'apparaît qu'à trois endroits : les numéros des étapes, le
   bouton de la fin, et les chiffres du catalogue. C'est le budget que
   la charte accorde, et cette page est justement celle qui explique
   pourquoi ces trois choses comptent.
   =================================================================== */

.me-shell {
  width: min(100%, 860px);
  padding-top: 82px;
  padding-bottom: 60px;
}

.me-fil {
  margin: 0 0 26px;
  font-size: 15px;
}

.me-fil a {
  color: var(--muted);
  text-decoration: none;
}

.me-fil a:hover { color: var(--text); }

/* --- La tête de page ------------------------------------------------ */
.me-tete {
  margin: 0 0 52px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.me-eyebrow {
  margin: 0 0 14px;
  font: 700 14px var(--ff-titre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

.me-tete h1 {
  margin: 0 0 22px;
  font: 800 clamp(2rem, 5vw, 3.1rem) var(--ff-titre);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--text);
  text-wrap: balance;
}

.me-chapo {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.14rem;
  line-height: 1.7;
}

/* Les trois chiffres du catalogue. Ils descendent du fichier des
   offres : une page qui explique qu'on ne recopie pas les chiffres des
   autres ne peut pas écrire les siens à la main. */
.me-chiffres {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
}

.me-chiffres li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.me-chiffres strong {
  font: 800 1.7rem var(--ff-titre);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.me-chiffres span {
  font-size: 15px;
  color: var(--faint);
}

/* --- Les sections --------------------------------------------------- */
.me-section { margin: 0 0 52px; }

.me-section h2 {
  margin: 0 0 26px;
  font: 800 clamp(1.5rem, 3vw, 2rem) var(--ff-titre);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
}

/* --- Les cinq étapes ------------------------------------------------
   La numérotation dit quelque chose de vrai : c'est un ordre, chaque
   étape suppose la précédente. Le trait vertical relie les pastilles,
   comme sur les pages de marque, pour qu'on lise un parcours et non
   une liste. */
.me-etapes {
  counter-reset: etape;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.me-etapes > li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 30px 62px;
}

.me-etapes > li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font: 800 14px var(--ff-titre);
  font-variant-numeric: tabular-nums;
}

/* Le trait de liaison s'arrête à la dernière étape : le parcours a une
   fin, et un trait qui pend dans le vide le dit mal. */
.me-etapes > li::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 46px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}

.me-etapes > li:last-child { padding-bottom: 0; }
.me-etapes > li:last-child::after { display: none; }

.me-etapes h3 {
  margin: 8px 0 10px;
  font: 700 1.16rem var(--ff-titre);
  line-height: 1.35;
  color: var(--text);
}

.me-etapes p {
  margin: 0;
  max-width: 64ch;
  color: var(--muted);
  font-size: var(--fs-lift);
  line-height: 1.7;
}

/* --- La transparence -------------------------------------------------
   Encadrée, parce que c'est la section qu'un lecteur méfiant cherche,
   et qu'elle doit se trouver sans être cherchée. */
.me-transparence {
  padding: 28px 30px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: grid;
  gap: 18px;
}

.me-transparence p {
  margin: 0;
  max-width: 66ch;
  color: var(--muted);
  font-size: var(--fs-lift);
  line-height: 1.7;
}

.me-transparence strong { color: var(--text); }

/* --- Ce qu'on ne fait pas -------------------------------------------- */
.me-jamais {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.me-jamais > li {
  padding: 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.me-jamais h3 {
  margin: 0 0 10px;
  font: 700 1.08rem var(--ff-titre);
  line-height: 1.35;
  color: var(--text);
}

.me-jamais p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

/* --- Le dernier bloc -------------------------------------------------- */
.me-final {
  padding: 34px 30px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.me-final h2 { margin-bottom: 14px; }

.me-final p {
  margin: 0 0 22px;
  max-width: 64ch;
  color: var(--muted);
  font-size: var(--fs-lift);
  line-height: 1.7;
}

.me-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.me-actions .resource-primary { margin-top: 0; }

.me-secondaire {
  min-height: var(--tap);
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  font: 600 16px var(--ff-texte);
  transition: border-color .18s ease, background .18s ease;
}

.me-secondaire:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}

@media (max-width: 640px) {
  .me-shell { padding-top: 70px; }
  .me-etapes > li { padding-left: 52px; }
  .me-etapes > li::before { width: 34px; height: 34px; }
  .me-etapes > li::after { left: 17px; top: 40px; }
  .me-transparence { padding: 22px 18px; }
  .me-final { padding: 26px 18px; }
}