/* Le guide emploie les couleurs et l'échelle de texte de l'application. */
.demarrage {
  max-width: 58rem;
  margin-inline: auto;
  overflow-wrap: anywhere;
}

.demarrage-intro { margin-bottom: var(--e6); }
.demarrage-surtitre {
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--e2);
}
.demarrage-intro h1 { max-width: 25ch; }
.demarrage-intro p { max-width: 65ch; }
.demarrage-intro > .bouton { margin-top: var(--e4); }
.demarrage-reussi {
  display: flex;
  align-items: center;
  gap: var(--e2);
  color: var(--ok);
  font-weight: 650;
}
.demarrage-reussi svg { width: 1.25rem; height: 1.25rem; flex: none; }
.demarrage-progression {
  display: flex;
  align-items: center;
  gap: var(--e4);
  flex-wrap: wrap;
}
.demarrage-progression h2 { margin: 0; }
.demarrage-jauge { display: flex; gap: var(--e1); width: 7rem; }
.demarrage-jauge span {
  flex: 1;
  height: .375rem;
  border-radius: 1rem;
  background: var(--trait-fort);
}
.demarrage-jauge .en-place { background: var(--accent); }
.demarrage-etapes {
  list-style: none;
  padding: 0;
  margin: var(--e4) 0 var(--e5);
  display: grid;
  gap: var(--e4);
}
.demarrage-etape {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--e5);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.demarrage-etape-tete {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--e3);
}
.demarrage-etape h3 { flex: 1; margin: 0; font-size: 1.0625rem; line-height: 1.4; }
.demarrage-numero {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--encre-douce);
  font-weight: 700;
}
.demarrage-etape.en-place .demarrage-numero { color: var(--accent); background: var(--accent-doux); }
.demarrage-icone { width: 1.35rem; height: 1.35rem; flex: none; color: var(--encre-douce); }
.demarrage-etape > p { margin-top: var(--e4); }
.demarrage-preuve { color: var(--encre-douce); font-size: .875rem; }
.demarrage-preuve svg { display: inline-block; width: 1rem; height: 1rem; vertical-align: text-bottom; }
.demarrage-etape.en-place .demarrage-preuve { color: var(--ok); }
.demarrage-etape > .bouton { margin-top: auto; }
.demarrage .bouton { white-space: normal; max-width: 100%; text-align: center; }
.demarrage-suite { padding: var(--e5); background: var(--surface-2); border-radius: var(--rayon); }
.demarrage-suite h2 { margin-top: 0; }
.demarrage-liens { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e3); }
.demarrage-liens a { padding-block: var(--e1); }
.demarrage-suite > .petit { margin-bottom: 0; margin-top: var(--e4); }
.demarrage-bandeau {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4);
  margin-bottom: var(--e4);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--accent-doux);
  overflow-wrap: anywhere;
}
.demarrage-bandeau > div { flex: 1; min-width: 0; }
.demarrage-bandeau p { margin: var(--e1) 0 var(--e2); }
.demarrage-bandeau > button { flex: none; }

@media (min-width: 46rem) {
  .demarrage-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 25rem) {
  .demarrage-etape, .demarrage-suite { padding: var(--e4); }
  .demarrage-icone { display: none; }
}