/* L'écran « Brancher ton IA » (§ brancher.js) : plein écran au-dessus du tiroir de menu
 * (`#menu`, z-index 50), qui l'ouvre. `#accueil`, jamais `.accueil` : cette classe est celle
 * de la landing. Le contenu reprend `.page`, `.carte` et `.bouton` du studio. */
#accueil {
  position: fixed;
  inset: 0;
  z-index: 55;
  overflow-y: auto;
  background: var(--fond);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
#accueil[hidden] {
  display: none;
}
#accueil > .page {
  max-width: var(--lisible);
  margin-inline: auto;
  padding: var(--e2);
}

/* Le prompt magique : un seul gros bouton, le texte replié dessous. */
.magique-bouton {
  font-size: 1.1rem;
  padding: var(--e2) var(--e3, 24px);
  width: 100%;
}
.magique-texte > summary {
  cursor: pointer;
  color: var(--encre-2);
}
.magique-etapes {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.8;
}
.magique-ok {
  font-weight: 600;
  font-size: 1.05rem;
}